时间戳

首页 > 解决方案 > NodeJS 服务器 pdf 文档生成问题

node.js - NodeJS 服务器 pdf 文档生成问题

问题描述

我正在开发一个 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 破解版

标签： node.jsherokuejshtml-pdfnode-html-pdf

解决方案

能够通过添加单个 CSS 样式规则来解决此问题。

html {
zoom: 0.55;
}

由于 html-pdf 包的默认缩放设置，这很可能是必需的。此设置和更多设置也可以通过选项进行配置；但是，我不确定缩放选项是否可以配置为 < 1。

推荐阅读