HTML 前端使用 JavaScript 生成的 PDF 文件，轻松保存到本地

2023-11-04 20:49:20

在 HTML 前端使用 JavaScript 生成 PDF 文件

安装依赖

在开始之前，需要安装两个依赖库：jsPDF 和 html2canvas。jsPDF 是一个用于生成 PDF 文档的 JavaScript 库，而 html2canvas 则用于将 HTML 内容转换为 Canvas 图片。

npm install jspdf html2canvas

生成 PDF 文件

通过 jsPDF 库中的 fromHTML() 方法可以将 HTML 内容转换为 PDF 文件。

const doc = new jsPDF();
doc.fromHTML(document.querySelector('body'));

上面的代码将整个页面的内容转换为 PDF 文件。如果想要只转换部分内容，可以使用 fromHTML() 方法的第二个参数指定要转换的元素。

doc.fromHTML(document.querySelector('#content'), 15, 15);

上面的代码将 content 元素的内容转换为 PDF 文件，并将其放置在 PDF 文件的 (15, 15) 位置。

保存 PDF 文件

通过 jsPDF 库中的 save() 方法可以将 PDF 文件保存到本地。

doc.save('filename.pdf');

上面的代码将 PDF 文件保存为 filename.pdf。

示例代码

<!DOCTYPE html>
<html>
<head>
  
  <script src="jspdf.min.js"></script>
  <script src="html2canvas.min.js"></script>
</head>
<body>
  <h1>HTML 前端使用 JavaScript 生成 PDF 文件</h1>
  <p>这是一个例子，展示了如何使用 JavaScript 在 HTML 前端生成 PDF 文件。</p>
  <button onclick="generatePDF()">生成 PDF 文件</button>

  <script>
    function generatePDF() {
      const doc = new jsPDF();
      doc.fromHTML(document.querySelector('body'));
      doc.save('filename.pdf');
    }
  </script>
</body>
</html>