vue使用html2PDF实现将内容导出为PDF
更新时间：2023年11月30日 10:54:24 作者：天行无忌
将 HTML 转换为 PDF 进行下载是一个比较常见的功能,这篇文章将通过html2PDF实现将页面内容导出为PDF,感兴趣的小伙伴可以跟随小编一起学习一下
将 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高级特性概念原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
这篇文章主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
本文主要介绍了vue自动检测手机端响应式布局,可以通过结合 CSS 媒体查询、Vue 的动态数据绑定、适当的第三方库、PostCSS 插件以及正确的视口设置实现,感兴趣的可以了解一下2024-07-07
这篇文章主要介绍了详解vue.js下引入百度地图jsApi的两种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了使用jenkins一键打包发布vue项目的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue中__ob__: Observer的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue Axios请求取消和重发的封装的实现,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue项目下，如何用命令直接修复ESLint报错，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue加载天气组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论