我使用 jsPDF 和 html2canvas 包从 HTML 保存 PDF 文件。
我的问题是内容是动态的,我不知道每个页面何时结束。
我使用此功能创建 PDF 并将内容拆分为页面。
但是有些时候文本行可以分成两页。我怎样才能防止这种情况?
import { Injectable } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
createpdf() {
var data = document.getElementById('parentdiv');
var date = new Date();
html2canvas(data).then(canvas => {
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
//enter code here
const imgData = canvas.toDataURL('image/png')
var doc = new jsPDF('p', 'mm');
console.log(doc)
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight + 15);
heightLeft -= pageHeight;
}
doc.save('Visiometria_' + date.getTime() + '.pdf')
});
}
最佳答案
您可以通过将 PDF 页面高度设置为与图像高度完全相同来防止这种情况。
您甚至可以为每个页面设置不同的大小
var doc = new jsPDF('p', 'mm', [68,20]);
doc.addPage(100, 200);
对于单页,您可以尝试以下代码
createpdf() {
var data = document.getElementById('parentdiv');
var date = new Date();
html2canvas(data).then(canvas => {
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
//enter code here
const imgData = canvas.toDataURL('image/png')
if("portrait"){
var doc = new jsPDF('p', 'mm', [210, imgHeight]);
} else {
var doc = new jsPDF('l', 'mm', [297, imgHeight]);
}
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
doc.save('Visiometria_' + date.getTime() + '.pdf')
});
}
关于angular - 防止在jsPDF中将文本拆分为两页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59407865/