你好，我写了一个 ejs 文件，我尝试通过它将它转换为 pdf，nodejs但问题是 pdf 文件看起来不像 html 页面，我在网上尝试了这种转换，我发现效果很好，这是我的方法
router.get("/uknow", (req, res) => {
//console.log(data[1].test);
//console.log(posts);
ejs.renderFile(path.join(__dirname, '..', '..', 'views', 'resultat.ejs'), {}, function(err, str) {
if (err) return res.send(err);
// str now contains your rendered html
pdf.create(str).toFile("report.pdf", function(err, data) {
if (err) return res.send(err);
res.send('Ok');
});
});
});
这是我的 ejs 外观
，我希望 pdf 文件具有相同的外观，但看起来
我需要一些帮助，谢谢
那是我的ejs代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Grid Layouts for Large Devices</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
div + div {
margin-left: 10px;
}
svg{
height:30px;
width: 30%;
}
.gridd{
display: grid;
grid-template-areas:
'menu main main main right right'
'menu footer footer footer footer footer'
;
grid-gap: 10px;
padding: 10px;
}
.spacer {
margin: 10px 170px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.div{
float:left;
margin-right:5px;
}
h2{
text-align: center;
}
body{
padding-top: 50px;
padding-right: 200px;
padding-bottom: 50px;
padding-left:200px;
}
.griddd{
display: grid;
grid-template-areas:
'left right'
;
grid-gap: 10px;
padding: 10px;
}
.gridd-item {
display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.gridd-item span {
margin-top: 10px;
}
.gridd-item svg{
width: 50px;
border-radius: 100%;
height: 50px;
padding: 20px;
background: rgb(237,209,94);
background: -moz-linear-gradient(0deg, rgba(237,209,94,1) 0%, rgba(196,134,0,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(237,209,94,1) 0%, rgba(196,134,0,1) 100%);
background: linear-gradient(0deg, rgba(237,209,94,1) 0%, rgba(196,134,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edd15e",endColorstr="#c48600",GradientType=1);
}
.gridd-item svg path {
filter: invert(1);
}
.right-part {
display: flex;
justify-content: center;
align-items: center;
}
.right-part .gridd-item {
margin-right: 20px;
}
</style>
</head>
<body >
<h2 class="text-center my-3"> posts[0].imei.model </h2>
<h5 class="text-center my-3"> posts[0].imei.name </h5>
<h3 class="text-center my-3">Resultat des tests</h3>
<h5 class="text-center my-3">Date:</h5>
<hr>
<div class="gridd">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em" viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
<span style="grid-area: main;">Ecran</span>
<br>
<span style="grid-area:footer;">health</span>
<span>
<svg height="24" viewBox="0 0 24 24" width="24"><path d="M7 7.07L8.43 8.5c.91-.91 2.18-1.48 3.57-1.48s2.66.57 3.57 1.48L17 7.07C15.72 5.79 13.95 5 12 5s-3.72.79-5 2.07zM12 1C8.98 1 6.24 2.23 4.25 4.21l1.41 1.41C7.28 4 9.53 3 12 3s4.72 1 6.34 2.62l1.41-1.41C17.76 2.23 15.02 1 12 1zm2.86 9.01L9.14 10C8.51 10 8 10.51 8 11.14v9.71c0 .63.51 1.14 1.14 1.14h5.71c.63 0 1.14-.51 1.14-1.14v-9.71c.01-.63-.5-1.13-1.13-1.13zM15 20H9v-8h6v8z"/></svg>
<svg style="position: relative;" data-name="Layer 102" viewBox="0 0 100 125" x="0px" y="0px"><path d="M62.12,4H13.38A5.76,5.76,0,0,0,7.63,9.75v80.5A5.76,5.76,0,0,0,13.38,96H62.12a5.76,5.76,0,0,0,5.75-5.75V84.77L71.7,88.6a3.57,3.57,0,0,0,5.06,0L91.32,74a3.56,3.56,0,0,0,0-5.05l-8.49-8.5A3.59,3.59,0,0,0,78.49,60c-1.45-1.94-5-7-5.64-10.07a15.94,15.94,0,0,0-2.48-6.14,28.41,28.41,0,0,0-2.5-3.15V9.75A5.76,5.76,0,0,0,62.12,4Zm3.75,86.25A3.76,3.76,0,0,1,62.12,94H13.38a3.75,3.75,0,0,1-3.75-3.75V9.75A3.75,3.75,0,0,1,13.38,6H62.12a3.76,3.76,0,0,1,3.75,3.75v29A7.82,7.82,0,0,0,62.13,37a4.91,4.91,0,0,0-2,.16V12.84a2.34,2.34,0,0,0-2.34-2.34H17.66a2.35,2.35,0,0,0-2.35,2.34V78a2.35,2.35,0,0,0,2.35,2.34H57.84A2.34,2.34,0,0,0,60.18,78V75.77l2.13.87a3.55,3.55,0,0,0,.9,3.47l2.66,2.66Zm-27.5-59,9.86,9.86A8.7,8.7,0,0,0,46,42.73a8.47,8.47,0,0,0-1.73,2.38,2.53,2.53,0,0,0-.11,2.35,6.6,6.6,0,0,0-1.74,1.26A5.55,5.55,0,0,0,41,51a2.65,2.65,0,0,0,.22,2.25,5,5,0,0,0-1.46,1,4.07,4.07,0,0,0-1.21,2.32,3.27,3.27,0,0,0,1,2.8l9.54,9.54a29.33,29.33,0,0,0,7.41,5.38l1.63.67v3a.34.34,0,0,1-.34.34H17.66a.35.35,0,0,1-.35-.34V12.84a.35.35,0,0,1,.35-.34H57.84a.34.34,0,0,1,.34.34V37.43L45.63,24.88c-2.18-2.18-4.16-2-5.15-1.76a5,5,0,0,0-3.34,3.63A4.58,4.58,0,0,0,38.37,31.22ZM79,62.08l.17-.17a1.54,1.54,0,0,1,1.11-.46,1.58,1.58,0,0,1,1.12.46l8.49,8.49a1.59,1.59,0,0,1,0,2.23L75.35,87.19a1.61,1.61,0,0,1-2.23,0l-5.25-5.25-1-1-1-1L64.63,78.7a1.57,1.57,0,0,1,0-2.23l1.24-1.24,1-1,1-1ZM68.73,44.88a14.06,14.06,0,0,1,2.16,5.38c.68,3.57,4.63,9.07,6.09,11L67.87,70.4l-1,1-.76.76-.24-.1-3.25-1.33-2.44-1-.07,0c-.32-.16-.62-.35-.93-.52s-.67-.37-1-.57a27,27,0,0,1-4.9-3.89L51.46,62.9l-4-4A1,1,0,0,0,46,60.29l5.84,5.85a29.73,29.73,0,0,0,6.32,4.77c.33.18.66.38,1,.56l.09,0,.91.37,4.39,1.8-1.21,1.22-3.18-1.3-1-.41-1-.41-.79-.33a27.28,27.28,0,0,1-6.84-5L41,58a1.34,1.34,0,0,1-.47-1.14,2.11,2.11,0,0,1,.65-1.16,2.43,2.43,0,0,1,1.49-.77.24.24,0,0,1,.15,0,1,1,0,0,0,1.42,0,1,1,0,0,0,.29-.7,1,1,0,0,0-.29-.71L43,52.26c-.3-.3-.09-.84.15-1.24a4.08,4.08,0,0,1,2.51-2,1,1,0,0,0,1.41,0,1,1,0,0,0,.29-.71,1,1,0,0,0-.29-.71l0,0L46,46.53c-.06-.25.33-1.23,1.48-2.39a4.77,4.77,0,0,1,2.33-1.51,1,1,0,1,0,1.42-1.42h0L39.76,29.79a2.61,2.61,0,0,1-.67-2.56A3,3,0,0,1,41,25c1-.28,2.1.16,3.2,1.25l14,14,1,1,1,1,2.2,2.19A1,1,0,1,0,63.79,43l-3.61-3.61-.09-.09.09,0A2.76,2.76,0,0,1,61.89,39a7.48,7.48,0,0,1,4,2.41c.33.33.66.68,1,1.07s.66.79,1,1.23S68.44,44.46,68.73,44.88Z"/>
</svg>
</span>
</div>
<hr>
<div class="gridd">
<svg style="grid-area:menu;"class="bi bi-volume-up" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"/>
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
<path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"/>
</svg>
<span style="grid-area:main;">Son</span>
<br>
<span style="grid-area:footer;">health</span>
<span>
<span class="rounded-circle"> <svg id="inner-circle" style="grid-area:menu;"viewBox="0 0 24 24"class="bi bi-bullseye" width="1em" height="1em" ><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z"/></svg>
</span>
<span class="dot"> <svg id="inner-circle" style="grid-area:menu;"viewBox="0 0 24 24"class="bi bi-bullseye" width="1em" height="1em" ><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z"/></svg>
</span>
<span class="dot"><svg id="inner-circle" style="grid-area:menu;"viewBox="0 0 24 24"class="bi bi-bullseye" width="1em" height="1em" ><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z"/></svg>
</span>
</div>
<hr>
<div class="gridd">
<svg style="grid-area:menu;"viewBox="0 0 24 24"class="bi bi-bullseye" width="1em" height="1em" ><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v3H5v6l3 6v3h8v-3l3-6V7h-1zM8 4h8v3h-2V5h-1v2h-2V5h-1v2H8V4z"/></svg>
<span style="grid-area:main;">Materiel</span>
<br>
<span style="grid-area:footer;">health</span>
</div>
<hr>
<div class="gridd">
<svg style="grid-area:menu;" class="bi bi-wifi" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z"/>
<path fill-rule="evenodd" d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z"/>
<path fill-rule="evenodd" d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z"/>
</svg>
<span style="grid-area:main;">Connectivite</span>
<br>
<span style="grid-area:footer;">health</span>
</div>
<hr>
<div class="gridd">
<svg style="grid-area:menu;"class="bi bi-camera" width="1em" height="1em" viewBox="0 0 16 16" fill="red" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5C7.343 5 5 6.343 5 8a4 4 0 0 1 4-4v1z"/>
<path fill-rule="evenodd" d="M14.333 3h-2.015A5.97 5.97 0 0 0 9 2a5.972 5.972 0 0 0-3.318 1H1.667C.747 3 0 3.746 0 4.667v6.666C0 12.253.746 13 1.667 13h4.015c.95.632 2.091 1 3.318 1a5.973 5.973 0 0 0 3.318-1h2.015c.92 0 1.667-.746 1.667-1.667V4.667C16 3.747 15.254 3 14.333 3zM1.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM9 13A5 5 0 1 0 9 3a5 5 0 0 0 0 10z"/>
<path d="M2 3a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1z"/>
</svg>
<div class="griddd">
<div class="gridd-item" style="grid-area: left;">
<p >Bonjour</p>
<span>Ecran</span>
</div>
<div class="griddd">
<div class="gridd-item" style="grid-area: left;">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em" viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
<span>Ecran</span>
</div>
<div class="right-part" style="grid-area: right;">
<div class="gridd-item">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em" viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
<span>Ecran</span>
</div>
<div class="gridd-item">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em" viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
<span>Ecran</span>
</div>
<div class="gridd-item">
<svg class="bi bi-bullseye" class="bi bi-bullseye" width="1em" height="1em" viewBox="0 0 24 24" style="grid-area: menu;"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M17 1.01L7 1c-1.1 0-1.99.9-1.99 2v18c0 1.1.89 2 1.99 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
<span>Ecran</span>
</div>
</div>
</div>
</div>
<hr>
</body>
</html>