使用 jspdf 库，我们可以轻松地将任何 HTML 页面或表单转换为 PDF：

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；成都网站设计、做网站收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十载的创新互联建站网站建设公司。

例如：

import { jsPDF } from 'jspdf';


const pdfContentEl = document.getElementById('pdf-content');


const doc = new jsPDF();


await doc.html(pdfContentEl.innerHTML).save('test.pdf');

PDF 是一种流行的文件格式，我们用来在不同平台和设备上呈现和共享具有固定布局的文档。

要开始转换，我们使用构造函数创建一个新的 jsPDF 对象。 然后我们调用 html() 方法，传递包含我们想要在 PDF 中的内容的元素。 在结果上，我们调用 save()，传递我们想要的输出 PDF 文件的名称。

假设我们有这样的 HTML：

  
Test

  
Here's what we're saving to PDF


Save PDF

在网页上有这样的输出：

当我们点击“保存 PDF”按钮时，jsPDF 将从 HTML 元素创建一个新的 PDF 并将其作为文件下载到浏览器中。

这是我们打开 PDF 时显示的内容：

安装 jsPDF

要开始使用 jsPDF 库，我们可以使用以下命令从 NPM 安装它：

npm i jspdf

安装后，我们可以将其导入到 JavaScript 文件中，如下所示：

import { jsPDF } from 'jspdf';

为了让这个文件在 HTML 中工作，我们可以使用像 Parcel 这样的模块捆绑器，这就是我使用的。

使用 Parcel，我们可以像这样在 HTML 中包含脚本：

我们可以在脚本中使用 TypeScript 和 ES 模块导入等现代工具，并且由于 Parcel，它可以正常工作。

在使用 npm install parcel 安装 Parcel 之后，我们使用 npx parcel my-file.html 运行 HTML。

npm install parcel


npx parcel my-file.html

Parcel 使 HTML 在 localhost:1234 可用，正如您可能在上面的演示中看到的那样。

自定义 HTML 到 PDF 的转换

jsPDF 构造函数接受一个自定义 PDF 转换过程的选项对象。

例如，方向选项设置生成的 PDF 的方向。

默认情况下，它是纵向的，但我们可以将其设置为横向。

自定义 PDF 方向

const doc = new jsPDF({ orientation: 'landscape' });

自定义 PDF 单位和尺寸

使用单位和格式选项，我们可以设置输出文件中每个 PDF 页面的单位和尺寸。

const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });

此处我们指定 2 x 4 英寸的横向导出。

将 HTML 表单转换为 PDF

jsPDF 还可以处理 HTML 元素，这些元素的外观可以根据用户交互动态变化，例如表单输入。

HTML:

  
  

      type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  


  Submit



Save PDF

JavaScript:

import { jsPDF } from 'jspdf';


const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
  await doc.html(formEl).save('test.pdf');
});

在网页中，我们在两个表单输入中放入了一些测试值，以查看它们是否显示在 PDF 输出中。

PDF:

但是，我们无法与 PDF 文件中的表单输入或按钮进行交互。

总结

jsPDF 库提供了一种将 HTML 内容（包括表单）转换为 PDF 格式的便捷方式。 

整个过程非常简单，我们可以新建一个jsPDF对象，调用html()方法指定内容，然后使用save()方法生成输出文件。 

此外，我们可以使用方向、单位和格式等选项自定义 PDF 输出。 

总的来说，使用 jsPDF 简化了在我们的网络应用程序中从 HTML 内容创建 PDF 文件的过程。

文章名称：如何仅使用JavaScript将任何HTML页面或表单转化为PDF文件
URL链接：http://www.36103.cn/qtweb/news37/30587.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联