vue2 将页面天生pdf下载
项目场景：在项目开发的过程中，常常有下载一些报表，有部分要求文档是pdf格式的文件，这时间可以插件快速地搭建一个将页面天生pdf文件的功能。
依赖支持
https://i-blog.csdnimg.cn/direct/5aa2b29615c94b2faaa50c0dfce83e31.png
本次项目中主要使用的nodejs: 14.20.0，npm版本是6.14.17。
npm install --save jspdf
npm install --save html2canvas;
npm install vue-router@3
实施步调：
1、创建vue2项目
2、设置路由 router
3、搭建下载功能
创建utils文件夹，文件夹内创建htmlToPdf.js文件，并将其加载在main.js
import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf) import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue) {
/**
*
* @param {*} reportName 下载时候的标题
* @param {*} isDownload是否下载默认为下载，传false不下载
*/
Vue.prototype.getPdf = function (reportName, isDownload = true) {
// var target = document.getElementsByClassName("right-aside");
// target.style.background = "#FFFFFF";
return new Promise((resolve, reject) => {
var title = reportName;
html2Canvas(document.querySelector('#app'), {
allowTaint: true
}).then((canvas) => {
let contentWidth = canvas.width
let contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89
//未生成pdf的html页面高度
let leftHeight = contentHeight
//页面偏移
let position = 0
//a4纸的尺寸，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
//避免添加空白页
if (leftHeight > 0) {
PDF.addPage()
}
}
}
if (isDownload) {
PDF.save(title + '.pdf')
}
// 删除本地存储的base64字段
var pdfData = PDF.output('datauristring')//获取base64Pdf
resolve(pdfData)
}
).catch(error=>{
reject(error)
})
})
}
}
}
4、开发功能,此中代码如下。初步的使用，已经可以下载pdf，详细的使用，必要根据自身的需求进行调解。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a @click="initData()" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<button @click="toGetPdf()">下载PDF</button>//这种情况是只下载，不上传后端
<!-- <button @click="toGetPdf(1, 0)">下载PDF</button>//这种情况是只走上传后端接口，不下载 -->
</div>
</template>
<script>
import { jsPDF } from "jspdf";
// Default export is a4 paper, portrait, using millimeters for units
export default {
name: 'HelloWorld',
data(){
return {
actName:'1111'
}
},
methods:{
initData(){
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
},
toGetPdf( ) {
/**
* val 决定走不走上传接口，默认为不上传给后端
* download 默认是下载
* /
/* */
this.$nextTick(() => {
setTimeout(() => {
window.scrollTo(0, 0); //这行代码很重要，它让页面的滚动条跳到了最上方如果点击打印按钮的时候,滚动条没有在最上方,打印内容会是不完整的,体验也会差
let title ="pdf文件"
this.getPdf(title, true) //download：false为不下载，这里调用了刚刚引用的全局函数，.then得到的值是base64位的pdf文件
}, 1000);
});
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
项目总结：
方法并不是很难，稍微相识，说不定以后得项目中，会使用到。
从项目中学习，然后本身重构，有助于自身快速的成长。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]