我有一个在 vuejs 中作为前端实现的 pdf 生成器功能。我的pdf结构如下
Heading
Section A
Title 1
description
Title 2
description
Section B
Title 1
description
Title 2
description
在上面的例子中，章节和标题是用户添加的动态数据。因此，当内容超过 2 页时，有时描述的一半会跳到下一页，如果描述超过，我希望标题和描述一起出现在下一页。
例如
第 1 页
Heading
Section A
1. Title 1
description
2. Title 2
description
Section B
1. Title 1
description
2. Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
第2页
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
我希望通过从第 1 页中删除标题 2 及其所有描述来显示在第二页中，如下所示。
第2页
2. Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
我怎样才能实现这个目标？ 我的生成 pdf 代码如下（边距已经实现）。
const generatePDF = async(pdfname?:any) =>{
try{
window.html2canvas = html2canvas;
let content = document.getElementById('printSection');
html2canvas(content, {
useCORS: true,
scale:2
}).then(canvas => {
const image = { type: 'jpeg', quality: 0.98 };
const margin = [0.5, 0.5];
var imgWidth = 8.5;
var pageHeight = 11;
var innerPageWidth = imgWidth - margin[0] * 2;
var innerPageHeight = pageHeight - margin[1] * 2;
// Calculate the number of pages.
var pxFullHeight = canvas.height;
var pxPageHeight = Math.floor(canvas.width * (pageHeight / imgWidth));
var nPages = Math.ceil(pxFullHeight / pxPageHeight);
// Define pageHeight separately so it can be trimmed on the final page.
var pageHeight = innerPageHeight;
// Create a one-page canvas to split up the full image.
var pageCanvas = document.createElement('canvas');
var pageCtx = pageCanvas.getContext('2d');
pageCanvas.width = canvas.width;
pageCanvas.height = pxPageHeight;
// Initialize the PDF.
var pdf = new jsPDF('p', 'in', [8.5, 11]);
for (var page = 0; page < nPages; page++) {
// Trim the final page to reduce file size.
if (page === nPages - 1 && pxFullHeight % pxPageHeight !== 0) {
pageCanvas.height = pxFullHeight % pxPageHeight;
pageHeight = ((pageCanvas.height * innerPageWidth) / pageCanvas.width) ;
}
// Display the page.
var w = pageCanvas.width;
var h = pageCanvas.height;
console.log(w,h,'cnvas')
pageCtx.fillStyle = 'white';
pageCtx.fillRect(0, 0, w, h);
pageCtx.drawImage(canvas, 0, page * pxPageHeight, w, h, 0, 0, w, h);
// Add the page to the PDF.
if (page > 0) pdf.addPage();
var imgData = pageCanvas.toDataURL('image/' + image.type, image.quality);
console.log( margin[1], margin[0],pageHeight)
pdf.addImage(imgData, image.type, margin[1], margin[0], innerPageWidth, pageHeight);
}
pdf.save(pdfname + '.pdf');
});
}catch (error) {
console.error('Error during PDF generation:', error);
}
}
尝试：PDF-Frame-Vue 满足您在 Vue 应用程序中的 PDF 要求。它是一个框架，允许您使用直观的 HTML 模板语法创建交互式且视觉丰富的 PDF 和 Canvas 图形。
欲了解更多详情：