我正在尝试将 ReactJS 输出（包括视觉报告等）保存为 PDF 文件。
我曾经html2canvas截取屏幕截图，然后用于jspdf将其转换为 PDF。但问题是当屏幕尺寸减小（或在移动视图中）时，即使屏幕截图也很小，因为它使用 DOM 样式。所以 PDF 没有正确生成，因为它应该在全视图中看到。
从 ReactJS 创建 pdf
IT技术
reactjs
jspdf
html2canvas
2021-05-24 20:10:47
1个回答
您可以使用 npm 的 dom-to-png 插件首先创建您的图像，然后将该图像放入您的 PDF 文件中。
像这样
export function printDetails(ref, fileName: string) {
const pdf = new jsPDF('p', 'mm', 'a4');
let height = pdf.internal.pageSize.height;
let pageHeightInPixels = ref.clientHeight;
let pageHeightInMM = pageHeightInPixels / 3.78;
let pages = pageHeightInMM / height;
const roundOff = Number(pages.toString().split('.')[1].substring(0, 1));
const pageNo = (roundOff > 0 ? pages + 1 : pages);
let pageCount = pages < 1 ? 1 : Math.trunc(pageNo);
let imageHeight = height;
domtoimage.toPng(ref, {
height: ref.clientHeight,
width: 665,
style: {
transform: 'unset',
left: '0%',
margin: 'unset',
backgroundColor: 'white',
maxHeight: '100%'
},
})
.then(function (dataURL) {
hidePrintPreviewModal();
for (let i = 1; i <= pageCount; i++) {
let pdfStartingHeight = height * (i - 1);
pdf.addImage(dataURL, 'JPEG', 30, -pdfStartingHeight, 160, ref.clientHeight);
if (i < pageCount) {
pdf.addPage();
}
}
pdf.save(`${fileName}.pdf`);
}).catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
使用 id
<html>
<body>
<div id="print">
{Whatever you want to print}
</div>
</body>
</html>
JS：
const ref = document.getElementById('print');
printDetails(ref, 'test')
使用 ref
class Demo extends React.Component {
refValue;
printData = () => {
const node = React.findDOMNode(this.refValue)
printDetails(node, 'test');
}
render() {
return (
<div ref={(value) => { this.refValue = value }}>
{Whatever you want to print}
<button onClick={this.printData}>PRint</button>
</div>
)
}
}
此函数使用 dom to png 和 jspdf 来打印文件。它还计算页数，以便不会遗漏任何内容。
您需要传递 html 元素的节点，您可以通过 ref 或该节点获取该节点，document.getElementById该函数将计算应用了高度和宽度的图像。
参考->