您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件

时间:2023-04-24 17:07:32  来源:微信公众号  作者:web前端开发
我们一起来了解一下如何仅使用 JAVAScript 将任何 html 页面或表单转化为 PDF文件。

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

例如:

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:

<div id="pdf-content">
  <h1>Test</h1>
  <p>Here's what we're saving to PDF</p>
</div>
<button id="save-pdf">Save PDF</button>

在网页上有这样的输出:

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

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

安装 jsPDF

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

npm i jspdf

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

import { jsPDF } from 'jspdf';

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

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

<script type="module" src="index.js"></script>

我们可以在脚本中使用 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:

<form id="form">
  <input type="email" name="email" id="email" placeholder="Email" />
  <br />
  <input
    type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  <br /><br />
  <button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>

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 文件的过程。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
我们一起来了解一下如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件。使用 jspdf 库,我们可以轻松地将任何 HTML 页面或表单转换为 PDF:例如:import { jsPDF } fr...【详细内容】
2023-04-24  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
在本文中,我想与您分享 13个基本的 JavaScript 函数,如果您是 Web前端开发人员,您应该熟悉这些函数。 您可以将本文所有 JavaScript 函数加入收藏至您的工具箱,以便在您的软件...【详细内容】
2023-04-12  Tags: JavaScript  点击:(14)  评论:(0)  加入收藏
作者:京东科技 周明亮AST 基础与功能在前端里面有一个很重要的概念,也是最原子化的内容,就是 AST ,几乎所有的框架,都是基于 AST 进行改造运行,比如:React / Vue /Taro 等等。 多端...【详细内容】
2023-04-10  Tags: JavaScript  点击:(18)  评论:(0)  加入收藏
1.可选链接可选链接是 JavaScript 中的一项新功能,它允许开发人员编写更简洁、更易于阅读的代码。使用可选链接,您可以访问对象的嵌套属性,而不必担心这些属性是否存在。const...【详细内容】
2023-04-10  Tags: JavaScript  点击:(17)  评论:(0)  加入收藏
作者:京东零售 谢天在任何语言开发的过程中,对于内存的管理都非常重要,Javascript 也不例外。然而在前端浏览器中,用户一般不会在一个页面停留很久,即使有一点内存泄漏,重新加载页...【详细内容】
2023-03-23  Tags: JavaScript  点击:(30)  评论:(0)  加入收藏
每种语言都有其独特性,使用最广泛的编程语言 JavaScript 也不例外。 今天这篇文章将讨论一些 JavaScript 通用优化技巧,这些技巧将帮助您编写更好的代码,希望你能从今天这篇文...【详细内容】
2023-03-20  Tags: JavaScript  点击:(31)  评论:(0)  加入收藏
JavaScript高级进阶课程中ES6内容 给我们编程带来了很多便利,以前用大量代码实现的功能现在变得非常简洁,总结了工作中经常使用的 5个 JavaScript 技巧,希望对你也有帮助。(1)、...【详细内容】
2023-03-16  Tags: JavaScript  点击:(12)  评论:(0)  加入收藏
querySelector()元素选择器功能: querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素;如果你需要返回所有的元素,请用 querySelectorAll() 方法替代; 语法: documen...【详细内容】
2023-02-21  Tags: JavaScript  点击:(48)  评论:(0)  加入收藏
JavaScript 是一种多功能且功能强大的编程语言,可用于前端和后端 Web 开发。无论你是一个完全的初学者还是已经有一些编程经验,这里有一个路线图可以帮助你轻松有效地学习 Jav...【详细内容】
2023-02-21  Tags: JavaScript  点击:(58)  评论:(0)  加入收藏
随着技术的日新月异,为开发人员提供了令人难以置信的新工具和API。但据了解,在100 多个 API中,只有5%被开发人员积极使用。让我们来看看一些有用的Web API,它们可以帮助您将网站...【详细内容】
2023-02-20  Tags: JavaScript  点击:(53)  评论:(0)  加入收藏
▌简易百科推荐
我们一起来了解一下如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件。使用 jspdf 库,我们可以轻松地将任何 HTML 页面或表单转换为 PDF:例如:import { jsPDF } fr...【详细内容】
2023-04-24  web前端开发  微信公众号  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
JavaScript(简称 JS)是一种广泛使用的编程语言,用于 Web 界面、服务器端编程等多种应用领域。然而,由于 JS 代码的开放性,代码易被人截取、窃取、篡改,从而引发隐私泄露、数据泄露...【详细内容】
2023-04-23  WangLiwen    Tags:JS   点击:(7)  评论:(0)  加入收藏
本文介绍了Day.js的使用方法,Day.js 是一个轻量级的JavaScript库,用于解析、验证、操作和格式化日期和时间。Day.js​ 的使用方法类似于Moment.js​,但 Day.js​ 的大小只有 2K...【详细内容】
2023-04-17  大迁世界  微信公众号  Tags:JavaScript   点击:(13)  评论:(0)  加入收藏
const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;const comdify = function (n) {if(!n) return n;let str = n.split(&#39;.&#39;);let re = /\d{1,3}(?=(\d{3})+$...【详细内容】
2023-04-13  小小的白  今日头条  Tags:JS   点击:(11)  评论:(0)  加入收藏
在本文中,我想与您分享 13个基本的 JavaScript 函数,如果您是 Web前端开发人员,您应该熟悉这些函数。 您可以将本文所有 JavaScript 函数加入收藏至您的工具箱,以便在您的软件...【详细内容】
2023-04-12  web前端开发  微信公众号  Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
接受两个字符串,如果接受的是数字,需要将数字转为字符串,但有一个点需要注意,转换过程中,可能会带有e,如1.12e+21,即1.12 * 21个0,需要将1.12 * 2个0,然后padStart(21 - 2个0)。let...【详细内容】
2023-04-11  剁椒鱼鳞  今日头条  Tags:   点击:(17)  评论:(0)  加入收藏
作者:京东科技 周明亮AST 基础与功能在前端里面有一个很重要的概念,也是最原子化的内容,就是 AST ,几乎所有的框架,都是基于 AST 进行改造运行,比如:React / Vue /Taro 等等。 多端...【详细内容】
2023-04-10  京东云开发者  今日头条  Tags:javascript   点击:(18)  评论:(0)  加入收藏
1.可选链接可选链接是 JavaScript 中的一项新功能,它允许开发人员编写更简洁、更易于阅读的代码。使用可选链接,您可以访问对象的嵌套属性,而不必担心这些属性是否存在。const...【详细内容】
2023-04-10  web前端开发  微信公众号  Tags:JavaScript   点击:(17)  评论:(0)  加入收藏
当我尝试移位16位值时,我看到一些奇怪的行为 0xF << 4 == 0xF0 // true0xFF << 8 == 0xFF00 // true0xFFF << 12 == 0xFFF000 // true0xFFFF << 16 == 0xFFFF0000 // false最...【详细内容】
2023-04-04  火龙果他爸  今日头条  Tags:JavaScript   点击:(32)  评论:(0)  加入收藏
文件流通过接口获取后调用以下方法模拟下载/** * @description 文件流下载方法 * @param {文件流} blob * @param {文件名} fileName * @param {文件后缀名} fileType */dow...【详细内容】
2023-04-03  RemoveS  今日头条  Tags:JavaScript   点击:(24)  评论:(0)  加入收藏
站内最新
站内热门
站内头条