前端实现pdf导出功能

最新推荐文章于 2025-05-23 10:41:36 发布

Laruae

最新推荐文章于 2025-05-23 10:41:36 发布

阅读量1.1k

点赞数 17

CC 4.0 BY-SA版权

文章标签： pdf 前端

本文链接：https://blog.csdn.net/Laruae/article/details/147223797

一、实现效果

能够将指定范围内的内容导出为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>