原生JS实现生成PDF文件

最新推荐文章于 2024-10-31 17:44:35 发布

李想曦

最新推荐文章于 2024-10-31 17:44:35 发布

阅读量864

点赞数 13

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_09726/article/details/142946649

原生JS实现生成PDF文件

去发现同类优质开源项目:https://gitcode.com/

本仓库提供了一个使用原生JavaScript实现生成PDF文件的资源文件。通过引入两个核心JavaScript文件，您可以轻松地将网页中的特定元素转换为图片，并生成PDF文件进行保存。

资源文件说明

1. `html2canvas.min.js`

该文件的主要功能是将网页中选择的元素转换为图片。通过使用html2canvas库，您可以捕获网页中的任何DOM元素，并将其渲染为图片格式。

2. `jspdf.min.js`

该文件是生成PDF文件的核心库。通过使用jsPDF库，您可以将生成的图片插入到PDF文件中，并保存为PDF格式。

使用方法

下载本仓库中的两个JavaScript文件：html2canvas.min.js 和 jspdf.min.js。

在您的HTML文件中引入这两个文件：

<script src="/static/js/js/html2canvas.min.js"></script>
<script src="/static/js/js/jspdf.min.js"></script>

编写JavaScript代码，调用html2canvas将目标元素转换为图片，然后使用jsPDF将图片插入到PDF文件中并保存。

示例代码

以下是一个简单的示例代码，展示如何将网页中的某个元素转换为PDF文件并保存：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>生成PDF示例</title>
    <script src="/static/js/js/html2canvas.min.js"></script>
    <script src="/static/js/js/jspdf.min.js"></script>
</head>
<body>
    <div id="content">
        <h1>这是一个示例内容</h1>
        <p>这是一些示例文本。</p>
    </div>
    <button onclick="generatePDF()">生成PDF</button>

    <script>
        function generatePDF() {
            html2canvas(document.getElementById('content')).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF();
                pdf.addImage(imgData, 'PNG', 0, 0);
                pdf.save('example.pdf');
            });
        }
    </script>
</body>
</html>