将 HTML 转换为 PDF 进行下载是一个比较常见的功能。过去要实现这个功能通常是放在服务端来实现，将文件生成好把链接发送给前端，让前端跳转进行下载。现在对于前端来说，使用库并写几行代码就可以简单的实现了。

前端 PDF 生成全部与浏览器的 API 调用有关，JavaScript 及其相关库使用这些 API 来完成任务。现在有很多 JavaScript 库使用，这里有个清单供参考：

  • jsPDF
  • html2pdf
  • pdfmake
  • PDFsKit
  • ReLaXed
  • nodeice
  • Electron
  • PDFObject
  • pdf2json

本文跟大家分享其中一个库 html2pdf.js。在这里将结合使用它和 Vue3 从 HTML 生成 PDF 进行下载。

Html2PDF 是创建报告并将其导出为 PDF 文件的最古老的组件，它基于使用外部 toolkit 包将任何屏幕直接打印到 PDF 文件。

所有项目的开始都是从安装依赖库开始：

npm install --save html2pdf.js

VUE 项目通常是从一个 App.vue 文件开始：

<template> <div id="app" ref="document"> <div id="element-to-convert"> <center> <img width="400" src="./assets/constellation.png" /> </center> </div> </div> <button @click="downloadToPDF">Download to PDF</button> </template> <style> #app { margin-top: 60px; } </style>

实例效果如下：

要生成 PDF，只需在项目中添加几行代码：

const downloadToPDF = () => {
    const element = document.getElementById("element-order-detail");
    const opt = {
        margin: 1,
        filename: "myfile.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: {
            unit: "in",
            format: "letter",
            orientation: "portrait",
        },
    };
    html2pdf().set(opt).from(element).save();
};

downloadToPDF 函数中定义了一个配置项对象。

Name Type Default Description
margin number or array 0 PDF 边距（以 jsPDF 为单位）。可以是单个数字，像CSS规则类似 [vMargin, hMargin], or [top, left, bottom, right].
filename string 'file.pdf' 导出的 PDF 的默认文件名
pagebreak object {mode: ['css', 'legacy']} 控制页面上的分页行为
image object {type: 'jpeg', quality: 0.95} 用于生成 PDF 的图像类型和质量
enableLinks boolean true 如果启用，PDF 超链接会自动添加到所有锚标记之上
html2canvas object { } html2canvas 配置选项
jsPDF object { } jsPDF 配置选项

以下是一个简单的示例 App.vue 文件完整代码：

<script>
import html2pdf from "html2pdf.js";
import { defineComponent } from "vue";
const AppHome = defineComponent({
    setup() {
        const downloadToPDF = () => {
            const element = document.getElementById("element-order-detail");
            const opt = {
                margin: 1,
                filename: "myfile.pdf",
                image: { type: "jpeg", quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: {
                    unit: "in",
                    format: "letter",
                    orientation: "portrait",
                },
            };
            html2pdf().set(opt).from(element).save();
        };
        return {
            downloadToPDF,
        };
    },
});
export default AppHome;
</script>
<template>
    <div id="app" ref="document">
        <div id="element-to-convert">
            <center>
                <img width="400" src="./assets/constellation.png" />
            </center>
        </div>
        <button @click="downloadToPDF">Download to PDF</button>
    </div>
</template>

<style>
#app {
    margin-top: 60px;
    text-align: center;
}
</style>

总结

html2pdf.js 可以快速、无缝地从 HTML 生成 PDF。它是构建生成 PDF 文档的简单应用程序的绝佳选择。

到此这篇关于vue使用html2PDF实现将内容导出为PDF的文章就介绍到这了,更多相关vue html2PDF导出为PDF内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

您可能感兴趣的文章:

  • vue导出html、word和pdf的实现代码
  • Vue导出页面为PDF格式的实现思路
  • Vue如何将页面导出成PDF文件
  • 基于Vue实现HTML转PDF并导出
  • vue导出少量pdf文件实现示例详解
  • vue3将页面生成pdf导出的操作指南
  • Vue3导出pdf文件详细方案