vue中将网页打印成pdf实例代码

vue中将网页打印成中将网页打印成pdf实例代码实例代码

本篇文章主要介绍了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>

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 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()

html2Canvas()

},

}

}

</script>

需要引入

html2canvas.js'

和

jsPdf.debug.js

这两个插件库可轻松百度到。如果eslint验证报错，可在eslintignore中设置不对这两个文件进行验证。