首页 > 解决方案 > NodeJS/Express 后端将 HTML 转换为 PDF。但是,它没有在 PDF 中格式化。所以我想调整内容以适应 PDF

问题描述

在本地主机上一切正常,即 pdf 非常适合。但在生产中,它与页面重叠并且似乎被缩小了,而且文本看起来比要求的大。我在 node.js 中使用 HTML 和 CSS 设计了页面。响应是包含 PDF 文件之外内容的 PDF(如下图所示)。 错误的输出

预期产出/方向

有没有办法调整以修复内容?

包含代码的文件代码:index.js。可在以下 GitHub 链接上找到: https ://github.com/tdube04/EPZ_ReportGeneration/blob/main/server/documents/index.js

body = `
            
            <div class="invoice-box" style="background-color: #f2f2f2; height: 340vh" style="margin-top:50px;">

            
               <div style="background-color: #a8d08d; height: 340vh; width:5vh; margin-left:10vh;margin-right:100vh;"> 
                  
                  <div style="background-color: #8eaadb;height: 260vh; width:200vh;margin-left:5vh"> 

                  <div style="background-color: #1f4e79; height: 37vh; width:200vh">
                     <br style="line-height: 200%"/>
                     <h2 style="text-align:absolute; color: white; font-size:22px; font-family: Candara">CONFIDENTIAL PSYCHOMETRIC REPORT</h2>
                  </div>
                  <div style="margin-top:70px">
                     <strong><p style="font-family: Candara"> Name of Candidate: ${candidate.testeeName} (${getInitials(candidate.testeeName)}) </p>  </strong>
                     <strong><p style="font-family: Candara; margin-top:40px">Position : Position  </p></strong>
                     <strong><p style="font-family: Candara; margin-top:40px">Company : Company Name</p> </strong>
                     <strong><p style="font-family: Candara; margin-top:40px"> Date : ${candidate.date_taken} </p>  </strong>
                  </div>
                  <div style="margin-left: 0vh; font-family: Candara; margin-top:410px">
                     <p style="font-size:11px">The contents of this report are highly confidential 
                        and unauthorised persons not directly involved with the 
                        selection decision may not obtain access to its contents. 
                        Under NO circumstances may this report 
                        or a copy of it be given to the candidate it concerns.
                     </p>
                     <p style="font-size:11px; color: #2e148b; font-family: Candara">Psychometric tests must not be used as the
                        sole determinant of selection decisions. 
                        Other sources of information like interviews, reference checks, etc.,
                        should also be considered in making a final decision.
                     </p>
                     

                     <div style="position:absolute; bottom:2375px; left:0px; height: 70vh; width:56vh;" > 
                     <p style="text-align:center; font-size:12px;font-family: Candara;margin-left:10px;"> DONE BY EP INDUSTRIAL PSYCHOLOGICAL SERVICES P/L </p>
                     <a href="default.asp">
                        <img  src="https://cdn.pixabay.com/photo/2021/10/01/10/26/epzglobal-6672108_960_720.jpg"
                           style="width:100%;height:15vh;position:absolute; max-width:156px;margin-left:10px;">
                     </a>
               </div> 
                  </div>
                  
            </div>
         </div>

标签: javascripthtmlcssnode.jspdf

解决方案


推荐阅读