简体   繁体   English

右侧的NodeJS html-pdf切割

[英]NodeJS html-pdf cutting of right side

I'm converting HTML to pdf using html-pdf ;我正在使用html-pdf将 HTML 转换为 pdf ; however, it is cutting the right side of the content.但是,它正在剪切内容的右侧。 I grab the HTML from database and send a pdf response to the browser using express.我从数据库中获取 HTML 并使用 express 向浏览器发送 pdf 响应。

let htmlData = await getData(); // it returns the HTML below

pdf.create(htmlData ).toBuffer(function(err, buffer){
    res.writeHead(200, {
        'Content-Type': 'application/pdf',
        'Content-Length': buffer.length
    });
    return res.end(buffer);
});

The HTML content (I can't change it, but I can add css style if needed HTML 内容(我无法更改,但如果需要,我可以添加 css 样式

<!DOCTYPE html>
<html>
   <head>
      </style>
      <link href=\"https://fonts.googleapis.com/css?family=Aguafina+Script|Alex+Brush|Bilbo|Condiment|Great+Vibes|Herr+Von+Muellerhoff|Kristi|Meddon|Monsieur+La+Doulaise|Norican|Nothing+You+Could+Do|Parisienne|Permanent+Marker|Sacramento|Yellowtail\" rel=\"stylesheet\">
   </head>
   <body>
      <p>&nbsp;</p>
      \n<p style=\"text-align: center;\"><span style=\"font-size: 12pt;\"><strong>My Doc TEST</strong></span></p>\n<p style=\"text-align: center;\"><span style=\"font-size: 8pt;\"><strong>dksfdksfndskfndsklfndskl dfkdsfnldks dsfkljdsklfdsmlkf.</strong></span></p>\n<p style=\"text-align: left;\"><span style=\"font-size: 8pt;\">Date: <strong>08/19/2020</strong></span></p>\n<table style=\"height: 30px;\" width=\"993\">\n
      <tbody>
         \n<tr style=\"height: 5847px;\">\n<td style=\"width: 488.5px; height: 5847px;\">\n
         <p><span style=\"background-color: #ff0000; color: #ffffff; font-size: 8pt;\">Moving In &mdash; General Information</span></p>
         \n
         <ol>
         \n
         <li dir=\"ltr\"><span style=\"background-color: #ffffff; color: #000000; font-size: 8pt;\">Parties. This Lease Contract (&ldquo;Lease&rdquo;) is between you, the resident(s) (list all people signing the Lease): ________<strong>NAME</strong> <strong>NAME</strong> ____<strong>NAME NAME </strong>_____________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ and us, the owner:&nbsp;<strong>COMPANY ABCABCABC</strong> You are renting Apartment No<strong> 53, </strong>at<strong> 123 MAIN </strong>in<strong> MY CITY</strong>, <strong>AA</strong> <strong>00000</strong> for use as a private residence only. The terms &ldquo;you&rdquo; and &ldquo;your&rdquo; refer to all residents listed above or, in the event of a sole resident&rsquo;s death, to someone authorized to act for the estate. The terms &ldquo;we,&rdquo; &ldquo;us,&rdquo; and &ldquo;our&rdquo; refer to the owner listed above and not to property managers or anyone else. Neither we nor any of our representatives have made any oral promises, representations, or agreements. This Lease is the entire agreement between you and us.</span></li>
         \n
         <li dir=\"ltr\"><span style=\"background-color: #ffffff; color: #000000; font-size: 8pt;\">Occupants. The apartment will be occupied only by you and (list all other occupants not signing the Lease): _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________&nbsp;&nbsp;&nbsp; and no one else. Anyone not listed here cannot stay in the apartment for more than ___7____ consecutive days without our prior written consent, and no more than twice that many days in any one month. If the previous space isn&rsquo;t filled in, 2 days total per month will be the limit.
   </body>
</html>

The PDF shows: PDF 显示: 在此处输入图像描述

If I change to just return the HTML content, it displays everything:如果我更改为只返回 HTML 内容,它会显示所有内容: 在此处输入图像描述

You can fix the issue with the following CSS properties:您可以使用以下 CSS 属性解决此问题:

break-inside: auto

The break-inside CSS property sets how page, column, or region breaks should behave inside a generated box.内部中断 CSS 属性设置页面、列或区域中断在生成的框中应如何表现。 If there is no generated box, the property is ignored.如果没有生成框,则忽略该属性。 Auto allows, but does not force, any break (page, column, or region) to be inserted within the principal box.自动允许但不强制在主体框中插入任何中断(页面、列或区域)。

And if you changed the following property from its normal state, you need to change it back:如果您从正常的 state 更改了以下属性,则需要将其更改回:

white-space: normal

Normal: Sequences of white space are collapsed.正常:空格序列被折叠。 Newline characters in the source are handled the same as other white space.源中的换行符的处理方式与其他空格相同。 Lines are broken as necessary to fill line boxes.必要时换行以填充行框。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM