vue-element-admin 项目中将局部页面导出为PDF格式

最新推荐文章于 2024-08-20 14:01:33 发布

what_are_you_so_diao

最新推荐文章于 2024-08-20 14:01:33 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/helloworldmyself/article/details/93874808

版权

本文介绍如何在vue-element-admin项目中将特定页面转换为PDF格式。通过使用html2canvas和jsPdf库，首先安装这两个模块，然后定义全局函数exportToPdf，将HTML内容转换为canvas，再转化为PDF并保存。该方法适用于需要将页面内容导出为PDF的场景。

摘要由CSDN通过智能技术生成

整体思路:将需要导出的内容页面转换为PDF格式，再通过图片的Base64码生成PDF。
html 页面
<el-button type=“success” @click=“getPdf(‘exportPdf’,filename)”>

js部分：

下面我们将进行实际操作：
1.我们需要引入两个模块
html2canvas和jsPdf
安装上面两个模块：
npm install htm2canvas --save
npm install jspdf
2 定义全局函数…
创建一个exportToPdf.js文件在指定位置.我个人习惯放在(‘src/utils/exportToPdf’)

import html2Canvas from ‘html2canvas’
import JsPDF from ‘jspdf’
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (id,title) {
var title = title
html2Canvas(document.querySelector(id), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let im