我正在开发一个 API，它基于 EJS 模板生成 pdf 文档，然后通过电子邮件发送给一些用户。在本地运行时，一切都按预期工作，但是当我的 API 被推送到 heroku 时，生成的 pdf 带有一些奇怪的格式错误。它就像页面基本上是垂直切开中间的。
有谁知道这可能的原因？
我正在使用 ejs 和 html-pdf
这是代码和模板
文档生成功能
ejs.renderFile(path.join(__dirname, '../views/', "offer.ejs"), {offerData}, (err, data) => {
if(err)
reject(err)
else
{
const options = {
"height": "11.25in",
"width": "8.5in",
"header": {
"height": "10mm"
},
"footer": {
"height": "10mm",
}
};
//creates the actual pdf doc for sending
pdf.create(data, options).toFile(`./offer_${inqID}.pdf`, function(err, res) {
if (err)
reject(err)
else
resolve(res.filename)
});
}
});
html pdf 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trade-in Disclosure Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<style>
body{
font-family: 'Roboto', sans-serif !important;
}
h1{
text-decoration: underline !important;
}
table.center {
margin-left:auto;
margin-right:auto;
}
td.rows{
padding-bottom: 10px;
text-align: left !important;
}
td.question{
padding-right: 15px;
}
span{
font-weight:bold !important;
}
</style>
</head>
<body style="border: solid black 2px; margin-left: 10px; margin-right:10px;">
<header class="text-center">
<h1 >The Auto Broker</h1>
<h2> Trade-In Vehicle Disclosure Form</h2>
<p style="margin-left: 6em; margin-right: 6em">
This Form has been filled out by the customer requesting a quote. It contains some basic details to help inform your evaluation of the vehicle.
If the customer provides false information you have the right to recind or adjust your offer to the customer; otherwise include the value of
this vehicle in your total value for the quote. Please ensure to carefully review all the data before providing a quote. Quotes are final and
cannot be altered once submitted.
</p>
</header>
<div style="padding-top:20px;">
<div class="form-container container">
<div class="row" style="background-color: black;">
<h3 style="color: aliceblue;" class="ml-2"> Vehicle History</h3>
</div>
<table class="center">
<thead>
<tr>
<th style="padding-bottom: 20px;"> <h4>Question </h4></th>
<th style="padding-bottom: 20px;"> <h4>Response </h4></th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows question">Has the Vehicle been in an accident?</td>
<td class="rows"> <%= questionnaire.inaccident %> </td>
</tr>
<tr>
<td class="rows question">Have any panels been repainted, repaired <br> or replaced?</td>
<td class="rows"> <%= questionnaire.panelrepairs %> </td>
</tr>
<tr>
<td class="rows question">Are you the original owner?</td>
<td class="rows"> <%= questionnaire.originalowner %> </td>
</tr>
<tr>
<td class="rows question">Is this an American Vehicle?</td>
<td class="rows"> <%= questionnaire.usvehicle %> </td>
</tr>
<tr>
<td class="rows question">Has the Vehicle been registered in any other <br> Province/State?</td>
<td class="rows"> <%= questionnaire.outofprovreg %> </td>
</tr>
<tr>
<td class="rows question">Is the Odometer faulty, replaced or rolled back? </td>
<td class="rows"> <%= questionnaire.faultyodometer %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any lights on the dashboard?</td>
<td class="rows"> <%= questionnaire.dashlights %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any factory warranty?</td>
<td class="rows"> <%= questionnaire.factorywarranty %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have extended warranty?</td>
<td class="rows"> <%= questionnaire.extwarrenty %> </td>
</tr>
<tr>
<td class="rows question">Was the vehicle ever used as a daily rental, <br> police vehicle, or taxi/limousine?</td>
<td class="rows">
<% if (questionnaire.rental) { %>
Rental <br>
<% } %>
<% if (questionnaire.taxilimo) { %>
Taxi / Limo <br>
<% } %>
<% if (questionnaire.policecar){ %>
Police Vehicle <br>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Does the vehicle require repairs to the following: <br>
<span style="margin-left: 10px;">Engine </span> <br>
<span style="margin-left: 10px;">Transmission/Powertrain</span> <br>
<span style="margin-left: 10px;">Electrical System </span> <br>
<span style="margin-left: 10px;">Air Conditioning System</span>
</td>
<td class="rows">
<%= questionnaire.enginerepair %> <br>
<%= questionnaire.transrepair %> <br>
<%= questionnaire.electricalrepair %> <br>
<%= questionnaire.acrepairs %> <br>
</td>
</tr>
<tr>
<td class="rows question">Additional Repair Details</td>
<td class="rows"> <%= questionnaire.repairdetails %> </td>
</tr>
<tr>
<td class="rows question">Outstanding Balance</td>
<td class="rows">
<% if (questionnaire.outstandingbalance){ %>
<%= questionnaire.outstandingbalance %>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Total Current Milage</td>
<td class="rows"> <%= questionnaire.milage %> K.M </td>
</tr>
<tr>
<td class="rows question">V.I.N</td>
<td class="rows"> <%= questionnaire.vin %> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
正确的 Img
破碎的 Img
