在现代前端应用程序中，下载PDF是一个常见的用例。但在客户端构建PDF可能会很繁琐。在React中，我们有一些很棒的库，比如react-pdf/renderer来帮助我们。
传统库的问题
react-pdf/renderer是一个很棒的库，提供了很多自定义功能，但它也有自己的代价。例如：
- 您必须为您的PDF文档设计一个单独的组件
- 如果没有适当处理边缘情况，有时渲染会失败
- 您必须按照它们的规范单独进行样式设计
如果您想构建数据密集和定制的PDF，这些都没问题。但是，如果您只想简单地打印正在渲染的组件，怎么办？
如果您只想按原样打印正在渲染的组件呢？
让我们看看如何使用一个聪明的技巧和一些JavaScript知识下载任何组件作为PDF。
概述
我们要采用的过程是将HTML元素转换为图像，然后将图像放入另一个强大的PDF库中。
HTML文档 -> 图片 -> PDF
为此，我们需要两个库。
- html2canvas -> 将转换我们的HTML文档为图像
- jspdf -> 将生成的图像插入到PDF文件中
完整的代码在下面。如果只感兴趣，请直接看那里。否则请耐心听我讲下去。不会花费太长时间
步骤1。安装依赖项
首先，安装所需的依赖项。
yarn add jspdf html2canvas
步骤2：添加下载功能
现在，要么为您的GenericPdfdownloader创建一个单独的组件，要么将以下代码放入要下载的组件内。
const downloadPdfDocument = (rootElementId) => {
const input = document.getElementById(rootElementId);
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
})
}
代码在做什么
Input-> 此函数将rootElementId作为输入。这将是可下载组件的id。我们可以像以下方式定义任何元素的id
return <div id="divToDownload">
// YOUR OTHER COMPONENT CODE GOES HERE
</div>
因此，如果我们想要下载带有id =“divToDownload”的div内的组件，则必须将“divToDownload”传递到函数中。
1. 获取HTML元素
在下一步中，我们获取具有传递的Id的HTML元素。
const input = document.getElementById(rootElementId);
2. 将HTML转换为图像
接下来，我们将元素传递到html2canvas，它将返回一个图像。
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
})
3. 将图像放入PDF
接下来，我们创建一个新PDF文档，并将图像放在其中。
const pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
这里的两个零是生成的PDF文档的padding。您可以按照您想要的进行更改。
此外，您可以修改可下载的文件名
