Reactjs jspdf不';t以适当的高度和宽度(像素)渲染
我在React中有一个useEffect挂钩,可以将我的页面转换为pdf。我无法使用正确的像素测量值将整个页面(只有整个页面)转换为pdf格式。宽度和高度总是太小。在浏览器中放大和缩小时,这会影响pdf的纵横比 如何将宽度和高度固定为与原始页面相同的宽度和高度(以像素为单位),并使纵横比始终为1 钩子转换为png,然后pdf和png部分看起来很好Reactjs jspdf不';t以适当的高度和宽度(像素)渲染,reactjs,jspdf,Reactjs,Jspdf,我在React中有一个useEffect挂钩,可以将我的页面转换为pdf。我无法使用正确的像素测量值将整个页面(只有整个页面)转换为pdf格式。宽度和高度总是太小。在浏览器中放大和缩小时,这会影响pdf的纵横比 如何将宽度和高度固定为与原始页面相同的宽度和高度(以像素为单位),并使纵横比始终为1 钩子转换为png,然后pdf和png部分看起来很好 useEffect(() => { if (reportRef.current) { let node = report
useEffect(() => {
if (reportRef.current) {
let node = reportRef.current;
let reportHeight = reportRef.current.offsetHeight
console.log("REPORT HEIGHT", reportHeight)
htmlToImage.toPng(node)
.then(function (dataUrl) {
const pdf = new jsPDF('p', 'px', [reportHeight, 555]);
pdf.addImage(dataUrl, 'PNG', 0, 0);
pdf.save("download.pdf");
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});}
}, [reportRef])
此代码渲染正确的宽度,但会切断图像:
useEffect(() => {
if (reportRef.current) {
let node = reportRef.current;
let reportHeight = reportRef.current.offsetHeight * 0.7
let reportWidth = reportRef.current.offsetWidth*0.7
console.log("REPORT HEIGHT", reportHeight)
htmlToImage.toPng(node)
.then(function (dataUrl) {
const pdf = new jsPDF('p', 'px', [11000, 555]);
pdf.addImage(dataUrl, 'PNG', 0, 0, reportWidth, reportHeight);
pdf.save("download.pdf");
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});}
}, [reportRef])