javascript - html2pdf.js 使用分页模式后如何添加边距?
问题描述
使用 html2pdf 将 html 转换为 pdf。我需要在分页符元素之后添加 margin-top 和 margin-bottom 。
这是一个分页模式
var element = document.getElementById('element-to-print');
var opt = {
margin: [0, 0, 30, 0], //top, left, buttom, right,
filename: 'my_file.pdf',
image: {type: 'jpeg',quality: 0.98},
html2canvas: {dpi: 192, scale: 2, letterRendering: true},
pagebreak: {mode: 'avoid-all'},
jsPDF: {unit: 'pt', format: 'a4', orientation: 'portrait'}
};
var worker = html2pdf();
console.log(worker);
worker.set(opt)
.from(element)
.toPdf()
.get('pdf')
.then(function (doc) {
var totalPages = doc.internal.getNumberOfPages();
for (var i=1; i<=totalPages; i++) {
if (i > 1) {
doc.setPage(i);
//?????
}
}
}).save();
解决方案
在这里,我使用适当的分页符将内容拆分为两个 pdf 页面,并为每个页面设置了 margin-top。
<button id="btnTest">Generate PDF</button>
<div id ="root">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div id="nextpage1">
Lorem Ipsum is simply dummied text of the printing and typesetting industry.
</div>
div {
outline: red solid 1px;
page-break-inside: avoid;
}
#nextpage1 {
page-break-before: always;
}
html2pdf().from(element).set({
margin: [1, 0, 0, 0],
filename: 'samplepdf.pdf',
pageBreak: { mode: 'css', before:'#nextpage1'},
jsPDF: {orientation: 'landscape', unit: 'in', format: 'letter'}
}).toPdf().get('pdf').then(function (pdf) {
var totalPages = pdf.internal.getNumberOfPages();
for (i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(10);
pdf.setTextColor(150);
pdf.text('This is the header text', (pdf.internal.pageSize.getWidth()/2.40), (pdf.internal.pageSize.getHeight()-8));
pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth()/2.25), (pdf.internal.pageSize.getHeight() - 1));
}}).save();
试试这个,请告诉我。
推荐阅读
- php - Braintree 交易,多个 lineItems,PHP
- javascript - Return Promise 和 await 完全一样吗?
- google-sheets - 如何获得分组数据的平均值和标准差?
- r - 有没有办法在 RStudio 查看器中显示多个表格?
- html - 输入元素具有引导网格的意外包装行为
- java - Sublime 构建打乱 Gradle 构建输出
- mysql - 使用 MySQL Replication 时如何在插入到主实例后立即在从属实例上获取数据?
- r - sf 对象在 R data.table 中创建为列表
- sql - 分组时获取额外的列
- javascript - 按钮编辑单击时将表格的数据行值显示到文本框并将其保存到数据库