导语 前两天接到一个需求,就是将Vue编写的页面导出成一个PDF的页面,在网上找了很久找到了如下的解决方案
首先安装如下的两个插件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
安装完插件之后,使用如下的方式进行导入操作。
导入完成之后,开始编写需要进行操作的Vue页面,如下,当然其中页面只是为了参考,读者可以通过自己编写的页面来进行测试
<template>
<div id="gz_app" class="app-container">
<img id="gz" src="@/assets/gz/gz1.png" v-drag >
<el-form>
<el-form-item>
<el-input>工会管理办公室</el-input>
</el-form-item>
</el-form>
<button type="button" class="btn btn-primary" v-on:click="getPdf()">导出PDF</button>
</div>
</template>
<style>
#app{
/*width: 1200px;*/
/*height: 800px;*/
/*position: relative;*/
/*border: 1px red solid;*/
}
#gz{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
cursor: pointer;
}
</style>
<script>
export default {
name: 'gz',
data () {
return {
htmlTitle: '页面导出PDF文件名'
}
},
directives: {
drag: {
// 指令的定义
bind: function (el) {
let odiv = el; //获取当前元素
odiv.onmousedown = () => {
//算出鼠标相对元素的位置
// let disX = e.clientX; //- odiv.offsetLeft;
// let disY = e.clientY; //- odiv.offsetTop;
document.onmousemove = (e)=>{
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX-300 /*- disX*/;
let top = e.clientY-300 /*- disY*/;
//绑定元素位置到positionX和positionY上面
//this.positionX = top;
// this.positionY = left;
//移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
}
}
</script>
<style>
#gz {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
编写完成之后,开始使用两个插件进行导出操作。
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle
html2Canvas(document.querySelector('#gz_app'), {
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 imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
console.log(contentWidth)
console.log(contentHeight)
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()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}
在main.js 中添加如下的一段代码,这样可以全局进行使用,其中路径可以自己指定
import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。