1:首先安装插件
npm install html2canvas jspdf --save
2:在utils文件新建htmlToPdf.js文件
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function (title) {
var element = document.querySelector('#pdfDom');
// 这个dom元素是要导出pdf的div容器
setTimeout(() => {
html2Canvas(element).then(function(canvas) {
var contentWidth = canvas.width; var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中圖片的寬高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var 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(); } } } pdf.save(title + '.pdf'); }); }, 0); } } }
3:在main.js文件中全局引用htmlToPdf.js文件
//引入js文件
import htmlToPdf from '@/components/utils/htmlToPdf'
//注册
Vue.use(htmlToPdf)
4:在组件中使用
<template>
<div>
<div id="pdfDom"> 需要生成的pdf内容 </div>
<el-button type="danger" @click="toGetPdf">导出PDF</el-button>
</div>
</template>
<script>
export default {
data() {
return { title: '' }
},
methods: {
toGetPdf() {
/* 這行代碼很重要,它讓頁面的滾動條跳到了最上方
若是點擊打印按鈕的時候,滾動條沒有在最上方,打印內容會是不完整的
固然,用起來體驗也會差一點,若是你有更好的辦法,
歡迎來評論區,咱們一塊兒探討*/
window.scrollTo(0, 0);
this.getPdf(this.title);
}
}
}
</script>
<style> </style>
以上为点击导出pdf,可直接下载pdf文件