我正在使用 jsPDF 从 HTML 生成文档(使用.html()
方法)并且效果很好。但现在我需要做下一步:
- 创建 jsPDF 对象。
- 使用以下内容添加内容
.html()
method.
- 将新页面添加到创建的文档中。
- 使用相同的内容将内容添加到第二页
.html()
method.
- 保存创建的文档。
这是代码示例:
var doc = new jsPDF({ orientation: 'p', format: 'a4' });
doc.html(document.getElementById('test'), {
callback: function (doc) {
doc.addPage('a4', 'p');
doc.html(document.getElementById('test'), {
callback: function (doc) {
doc.output('dataurlnewwindow');
}
}
}
问题是第二页总是空白。这个想法是使用创建两个单独的文档.html()
方法,然后将这两个文档合并为一个并保存。
所以问题是 - jsPDF 是否可以将两个文档合并为一个并保存?
提前致谢!
我可以使用以下命令成功地将多个 jsPDF 对象合并到一个 pdf 文件中:
// .ts
private async generatePdfList(type: string, page = 1) {
console.log('STEP 1:', new Date());
const elements = document.querySelectorAll('.staff-list-receipt');
const elementArray = Array.from(elements);
const bufferPromises: Promise<any>[] = elementArray
.filter(element => !!element)
.map(element => this.elementToPdfBuffer(type, element, page));
const pdfArrayBuffers = await Promise.all(bufferPromises);
console.log('STEP 2:', new Date());
const mergedPdf = await this.mergePdfs(pdfArrayBuffers);
const pdfUrl = URL.createObjectURL(
new Blob([mergedPdf], { type: 'application/pdf' }),
);
}
async elementToPdfBuffer(type, element, page) {
// option 1:
// const pdf: jsPDF = html2pdf().from(element).toPdf().get("pdf");
// option 2:
new jsPDF().fromHTML(element);
const pdfBuffer = await pdf.output("arraybuffer");
return pdfBuffer;
}
async mergePdfs(pdfsToMerges: ArrayBuffer[]) {
const mergedPdf = await PDFDocument.create();
const actions = pdfsToMerges.map(async pdfBuffer => {
const pdf = await PDFDocument.load(pdfBuffer);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach((page) => {
// console.log('page', page.getWidth(), page.getHeight());
page.setWidth(210);
mergedPdf.addPage(page);
});
});
await Promise.all(actions);
const mergedPdfFile = await mergedPdf.save();
return mergedPdfFile;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)