在现代前端应用程序中,下载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
。您可以按照您想要的进行更改。
此外,您可以修改可下载的文件名