前端实现pdf导出功能的思路及完整代码
作者：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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！