前端实现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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
浅析JavaScript中如何正确判断null和undefined
这篇文章主要为大家详细介绍了JavaScript中如何正确判断null和undefined,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下2026-01-01
文章主要分析了Vue3项目打包体积过大的原因,并提供了解决方案,包括代码分割、懒加载、生产模式压缩、静态资源优化、Tree-shaking等,此外,还介绍了使用工具进行可视化分析、配置构建优化以及运行时性能优化的方法,需要的朋友可以参考下2026-01-01
下面小编就为大家带来一篇基于JS递归函数细化认识及实用实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文主要给大家详细总结了下javascript中的运算符，包括常见的算数运算符、比较运算符和逻辑运算符。十分的清晰，有需要的小伙伴可以参考下。2015-06-06
解决css和js的{}与smarty定界符冲突问题的两种方法
当输入url地址后网页出现如下文所描述的问题通常是css和js的{}与smarty定界符冲突导致的，解决方法有两个，具体如下，感兴趣的朋友可以参考下2013-09-09
试想一下你要在你的网站提供如下这样的功能：提供一个文本框用于收集用户数据，这个文本框只能接受整型的数值，不提供给用户手工输入，只提供两个按钮。2009-10-10
本文给大家分享的是使用javascript实现解答九宫格问题的算法，非常的简单实用，有需要的小伙伴可以参考下。2015-04-04
arguments.callee的使用方法，具体大家自己测试了2009-05-05
这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果，非常不错，对微博输入框效果感兴趣的朋友通过本文学习吧2016-12-12
最近在学习three.js，将学习中遇到的知识点总结分享出来，下面这篇文章主要给大家介绍了关于Three.js利用顶点绘制立方体的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
最新评论