在 React 中将 HTML 下载为 PDF

510 阅读2分钟

在现代前端应用程序中,下载PDF是一个常见的用例。但在客户端构建PDF可能会很繁琐。在React中,我们有一些很棒的库,比如react-pdf/renderer来帮助我们。

传统库的问题

react-pdf/renderer是一个很棒的库,提供了很多自定义功能,但它也有自己的代价。例如:

  • 您必须为您的PDF文档设计一个单独的组件
  • 如果没有适当处理边缘情况,有时渲染会失败
  • 您必须按照它们的规范单独进行样式设计

如果您想构建数据密集和定制的PDF,这些都没问题。但是,如果您只想简单地打印正在渲染的组件,怎么办?

如果您只想按原样打印正在渲染的组件呢?

让我们看看如何使用一个聪明的技巧和一些JavaScript知识下载任何组件作为PDF。

概述

我们要采用的过程是将HTML元素转换为图像,然后将图像放入另一个强大的PDF库中。

HTML文档 -> 图片 -> PDF

为此,我们需要两个库。

  1. html2canvas -> 将转换我们的HTML文档为图像
  2. 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。您可以按照您想要的进行更改。

此外,您可以修改可下载的文件名