css - 右侧的NodeJS html-pdf切割
问题描述
我正在使用将 HTML 转换为 pdf html-pdf
;但是,它正在剪切内容的右侧。我从数据库中获取 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);
});
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> </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 — General Information</span></p>
\n
<ol>
\n
<li dir=\"ltr\"><span style=\"background-color: #ffffff; color: #000000; font-size: 8pt;\">Parties. This Lease Contract (“Lease”) 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: <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 “you” and “your” refer to all residents listed above or, in the event of a sole resident’s death, to someone authorized to act for the estate. The terms “we,” “us,” and “our” 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): _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ 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’t filled in, 2 days total per month will be the limit.
</body>
</html>
解决方案
您可以使用以下 CSS 属性解决此问题:
break-inside: auto
break-inside CSS 属性设置页面、列或区域中断在生成的框内的行为方式。如果没有生成框,则忽略该属性。自动允许但不强制在主体框中插入任何中断(页面、列或区域)。
如果您从正常状态更改了以下属性,则需要将其更改回:
white-space: normal
正常:空格序列被折叠。源中的换行符的处理方式与其他空格相同。必要时换行以填充行框。
推荐阅读
- php - 如何使用嵌套的 PHP 对象仅将第一级编码为 JSON
- python-3.x - 使用“@pytest.mark.parametrize”夹具调用类级别变量
- php - 如何将我的 azure Web App PHP 版本 7.2 更改为 7.1?
- android - 我可以在两个活动之间共享布局 xml(将数据绑定与 MVVM 模式一起使用)
- css - 在 Vuetify 中设置活动类的样式
- python - 如何使用 Jetson nano GPIO 在 GPIO.TEGRA_SOC 模式与 GPIO.BCM 模式下设置 gpio 引脚?
- asynchronous - 如何转换未来
诠释? - javascript - 如何在html表格中创建多维数组
- arrays - 将 pandas 数据框中的一维数组转换为数字
- arrays - 我们如何在 MongoDB 中合并嵌套的子文档数组(数组中的数组)