关于vue打印和下载pdf分享

安装(命令行)

npm install vue-print-nb --save

main.js中引入

import Print from 'vue-print-nb'
Vue.use(Print)

vue文件

<el-button v-print="`#print`">打印</el-button><div id="#print">需要打印的内容</div>

 

VUE使用html2canvas以及JsPdf依赖完成页面转pdf图片

 

下载依赖:html2canvas、jspdf

npm install html2canvas jspdf --save
新建htmlToPdf.js文件

// 导出页面为PDF格式
import html2Canvas from 'html2canvas' // 导入依赖
import JsPDF from 'jspdf'
import {
Message, Loading // 导入UI组件
} from 'element-ui'
let loading;
export default{
install (Vue, options) {
Vue.prototype.getPdf = function () {
loading = Loading.service({ // 这里添加了loading效果
lock: true,
text: '正在下载pdf...',
background: 'rgba(0,0,0,.5)'
});
let title = this.htmlTitle // 文件名称
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function (canvas) {
console.log(canvas)
let contentWidth = canvas.width;
let contentHeight = canvas.height;
if (contentWidth === '' || contentWidth === undefined || contentHeight === '' || contentHeight === undefined) { // 判断是否转换失败
loading.close();
Message.error('转换pdf失败,请稍后再试!')
}
let pageHeight = contentWidth / 595 \* 842
let leftHeight = contentHeight
let position = 0
let imgWidth = 595
let imgHeight = 595 / 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 -= 842
if (leftHeight > 0) {
PDF.addPage()
}
}
}
loading.close(); // 关闭loading效果
PDF.save(title + '.pdf')
})
}
}
}

在main.js中进行引用

import htmlToPdf from './tools/htmlToPdf' // 导出pdf
Vue.use(htmlToPdf)
使用方法:

调用getPdf('需要打印的模块ID') 方法【不能进行滚动条隐藏,否则只打印滚动条当前界面】

<div id\="pdfDom"\>这里是需要打印的模块</div\>
<el-button type\="primary" size\="small" @click\="getPdf('#pdfDom')"\>点击下载</el-button\>


export default {
data () {
return {
htmlTitle: '页面导出PDF文件名'
}
}
}