使用 JavaScript 将浏览器页面下载为 PDF。

大家好，今天我们将讲解如何将浏览器页面保存为 PDF 文件。我们将使用原生 JavaScript 生成 PDF 文件。此功能可用于为用户生成发票或收据。

GIF

先决条件

🎯 JavaScript
🎯 HTML
🎯 html2pdf.js CDN

目录

• HTML 代码
• JavaScript 代码
• 结论

♣️ 我决定用 .NET 编写所有代码index.html，您可以根据需要随意重构。发票模板来自Bootsnip，作者是[作者姓名]。海迪卢克斯我对模板进行了一些调整，使其更适合这个项目。

🎯 首先，将html2pdf CDN脚本添加到样板代码的头部HTML。

🎯 另外，把这个加到头上

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

🎯 接下来，让我们完善用于存储发票所有数据的div container元素。📝 请确保将要显示的内容包裹在.index.html
div

🎯 我们编写按钮onclick事件

    <button onclick="generatePDF()">Generate Invoice</button>

🎯 最后，我们编写JavaScript函数。

<script>
    function generatePDF() {
        const element = document.getElementById('invoice');
        html2pdf()
            .from(element)
            .save();

    }
</script>

点击Generate Invoice按钮进行测试。

结论

希望这篇文章对您有所帮助，教会了您如何生成pdf文件。如果您有更好的生成pdf文件的方法，请在下方留言JavaScript。

资源

🍄视频参考资料来自 Voran 的代码

学习如何使用 Web Socket 发送邮件📬👇

返回顶部