前端实现pdf导出功能的思路及完整代码
更新时间：2025年08月19日 10:07:11 作者：Laruae
在现代的Web应用开发中,常常需要实现文档导出功能,例如导出Word文档或PDF文件,这篇文章主要介绍了前端实现pdf导出功能的思路及完整代码,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、实现效果
能够将指定范围内的内容导出为pdf文件
点击导出为pdf按钮，即将页面内容导出为pdf
导出的文件：
二、实现思路
为了简单起见，使用html来简单展示效果
首先需要下载的依赖：
html2canvas：
jsPDF：
1. 获取元素
- 使用
document.getElementById分别获取页面上 ID 为exportButton的按钮元素以及 ID 为content的目标内容元素。这两个元素分别用于触发导出操作和确定要导出的内容范围。
2. 添加点击事件监听器
- 为
exportButton按钮添加click点击事件监听器。当按钮被点击时，会执行传入的回调函数。
3. 使用 html2canvas 生成 canvas
- 在点击事件的回调函数中，调用
html2canvas(content)方法。html2canvas库能将指定的 DOM 元素（这里是content）渲染成一个canvas元素。该操作返回一个 Promise，当canvas生成成功时，会进入then回调。
4. 处理生成的 canvas
- 在
html2canvas的then回调中，首先通过canvas.toDataURL('image/png')将生成的canvas转换为 PNG 格式的图片数据 URL。 - 接着创建一个新的
jspdf.jsPDF实例pdf，用于生成 PDF 文件。 - 使用
pdf.getImageProperties(imgData)获取图片数据的属性，以便后续调整图片在 PDF 中的尺寸。 - 计算 PDF 页面的宽度
pdfWidth，并根据图片的宽高比以及 PDF 页面宽度，计算出图片在 PDF 中合适的高度pdfHeight。
5. 将图片添加到 PDF 并保存
- 通过
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)将转换后的图片数据添加到 PDF 中，指定图片格式为 PNG，位置从 PDF 页面的左上角（0, 0）开始，宽度和高度为前面计算好的值。 - 最后调用
pdf.save('exported_content.pdf')将生成的 PDF 文件保存到本地，文件名为exported_content.pdf。
三、最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export HTML to PDF</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<div id="content">
<h1>测试标题</h1>
<p>古人云：“学如逆水行舟，不进则退。” 在漫漫人生征途上，学习恰似那前行的舟楫，唯有持续奋进，方能抵达理想的彼岸。学习，是贯穿我们一生的课题，是个人成长、社会进步的动力源泉。
学习，点亮个人成长的灯塔。古往今来，无数仁人志士因学习而铸就非凡人生。匡衡幼时勤奋好学，却因家贫无烛，他凿穿墙壁借邻舍烛光读书，终成一代学问家。车胤囊萤夜读，孙康映雪苦学，他们在艰苦环境中凭借对学习的执着，为自己赢得了改变命运的机会。在现代社会，学习同样是实现个人价值的关键。屠呦呦几十年如一日地钻研中医药学，翻阅大量古籍，进行无数次实验，最终发现青蒿素，拯救了无数生命，为人类健康事业作出巨大贡献。她的成功，源于对知识的不懈追求与刻苦学习。通过学习，我们不断丰富知识储备，提升自身能力，拓展视野，从而更好地认识自我、发掘潜力，塑造丰富多彩的人生。
学习，推动社会发展的车轮。一个国家、一个民族的繁荣昌盛离不开全民学习的良好氛围。回首工业革命时期，科技的飞速发展正是源于人们对科学知识的积极探索与学习。瓦特改良蒸汽机，开启了蒸汽时代，极大地提高了生产力，推动了工业文明的进程。如今，在信息时代，互联网、人工智能等新技术日新月异，这背后是无数科研人员持续学习、创新突破的成果。在社会的各个领域，从教育到医疗，从文化到经济，人们通过学习新知识、掌握新技能，为社会的发展注入源源不断的活力。当全民都投身于学习之中，整个社会便拥有了强大的发展动力，不断向着更高水平迈进。</p>
</div>
<button id="exportButton">导出为 PDF</button>
<script>
const exportButton = document.getElementById('exportButton');
const content = document.getElementById('content');
exportButton.addEventListener('click', () => {
html2canvas(content).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jspdf.jsPDF();
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('exported_content.pdf');
});
});
</script>
</body>
</html>
总结
到此这篇关于前端实现pdf导出功能的思路及完整代码的文章就介绍到这了,更多相关前端导出pdf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS开发中百度地图+城市联动实现实时触发查询地址功能,需要的朋友可以参考下2017-04-04
这篇文章主要给大家介绍了关于如何编写一个d.ts文件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d.ts具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
下面小编就为大家带来一篇用JS编写一个函数,返回数组中重复出现过的元素(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
自启动函数想必大家并不陌生吧，在本文将为大家详细探讨下，感兴趣的朋友可不要错过2013-10-10
这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下2016-01-01
网站信任度：一方面指浏览者对于站点的信任程度,另一方面指搜索引擎对于网站的信任值（TrustRank）,网站信任度对于企业站点更为重要.在得到更高信任度的同时,流量更容易转化为实在的收入.2008-10-10
这篇文章主要为大家分析了js闭包引起的事件注册问题，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了Typescript使用修饰器混合方法到类的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
JavaScript变量声明的var、let、const详解
JavaScript中的变量是松散类型的,可以保存任何类型数据,变量只不过是一个名称,下面这篇文章主要给大家介绍了关于JavaScript变量声明的var、let、const的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了JavaScript实现tab栏切换的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论