vue中将网页打印成pdf实例代码
程序员文章站
2022-03-21 15:15:29
整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。
整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。
<template>
<div class="pdf-wrap" id="pdfwrap">
<button v-on:click="getpdf">点击下载pdf</button>
<div class="pdf-dom" id="pdfdom"></div>
</div>
</template>
<style lang="scss" scoped>
</style>
<script type="text/ecmascript-6">
import html2canvas from '@/components/html2canvas.js'
import jspdf from '@/components/jspdf.debug.js'
export default {
methods: {
getpdf: function () {
let _this = this
let pdfdom = document.queryselector('#pdfdom')
html2canvas(pdfdom, {
onrendered: 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')
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(_this.pdfdata.title + '.pdf')
}
})
html2canvas()
},
}
}
</script>
需要引入
html2canvas.js'
和
jspdf.debug.js
这两个插件库可轻松百度到。如果eslint验证报错，可在eslintignore中设置不对这两个文件进行验证。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 详解Vue.use自定义自己的全局组件