如何下载React组件作为高分辨率的PDF ?

Question

我一直在使用React构建一个瓶子标签制作应用程序。人们可以根据需要创建自定义标签。我已经添加了让用户以PDF格式下载结果的功能。

从React Components生成PDF文件

我实现了下载React组件到PDF参考上面的链接。html2canvas,jsPDF。顺便说一句，有个质量问题。如果我放大下载的PDF文件，质量不太好。(React组件尺寸为380px * 380px).

相反，如果我放大(500%)chrome浏览器，然后下载PDF，即使放大PDF阅读器(Foxit reader或chrome PDF Viewer)，质量也很好。也许是使用html2canvas &jsPDF似乎是根据组件大小。

所以我必须要求客户下载PDF后，他们的浏览器缩放(500%)，如果他们想要高分辨率的PDF ?哈哈这不是。我读了几篇关于下载PDF的文章，但还没有找到解决办法。

是否有任何方法来实现上述功能的代码?

作为参考，这是我的代码下载pdf使用html2canvas &jsPDF .

const printRef = React.useRef<HTMLDivElement>(null);
...
const handleDownloadPdf = async () => {
const element: any = printRef.current;
const canvas = await html2canvas(element);
const data = canvas.toDataURL("image/png");

const pdf = new jsPDF("portrait", "px", [380, 380]);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
pdf.save("label.pdf");
};
...
<div ref={printRef} style={{ height: "380px" }}>
<Label/>
</div>

Answer 1

我找到了另一个解决方案。我应该控制画布的大小。

html2canvas(element, {
scale: 5,
}).then(function (canvas) {
var data = canvas.toDataURL("image/png");
pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
pdf.save("label.pdf");
});