vue导出单页pdf
vue项目导出单页pdf
提示：在vue项目中使用html2canvas+jspf导出单页(连续页不分页)pdf
安装插件
npm install --save html2canvas
npm i jspdf --save
在需要导出的vue页面中引入
import html2canvas from ‘html2canvas’;
import jsPDF from ‘jspdf’;
import { Loading } from ‘element-ui’; //导出耗时，用来提示的loading
伪html结构
<template>
<div class="main-page" id="dispatchReportPage">
<!-- 子页面A-->
<A/>
<!-- 子页面B-->
<B/>
.....
</div>
</template>
methods中导出pdf方法
exportPDF() {
this.$nextTick(() => {
// 生成的pdf只有页面窗口可见的区域，有滚动条的下面没有生成出来，需在生成PDF前，改overflow属性auto为visible
// 获取dom高度、宽度
var shareContent = document.querySelector('#dispatchReportPage');
var width = shareContent.offsetWidth / 4;
var height = shareContent.offsetHeight / 4;
let _this = this;
// eslint-disable-next-line
let loadingInstance = Loading.service({text: '正在导出，请稍等'});
html2canvas(document.getElementById('dispatchReportPage'), {
dpi: 900,
// scrolly: 0,
// width:eleW,//生成后的宽度
// height:eleH,//生成后的高度
// scrollx: -10,
useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
// backgroundColor: null //避免图片有白色边框
}).then((canvas) => {
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var img = new Image();
img.src = pageData;
img.onload = ()=> {
// 获取dom高度、宽度
img.width = img.width / 2;
img.height = img.height / 2;
img.style.transform = 'scale(0.5)';
if (width > height) {
// 此可以根据打印的大小进行自动调节
// eslint-disable-next-line
var pdf = new jsPDF('l', 'mm', [width * 0.505, height * 0.545]);
} else {
// eslint-disable-next-line
var pdf = new jsPDF('p', 'mm', [width * 0.505, height * 0.545]);
}
pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545);
pdf.save('名字' + '.pdf');
loadingInstance.close();
};
});
});
//
},
1.采用**单页**导是由于页面由二十几页组成长度较高，且页面中子组件页面高度不固定，采用分页导出导致有的子组件页 面被截断
2.采用单页面导出整个页面，html2canvas导出是否有最大长度限制未知， pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height * 0.545)，中height值可适当调整
3.页面中有滚动条时需要将带有滚动条的区域去掉滚动条再导出，overflow:visible
有bug欢迎留言讨论
番外分页pdf
Vue.prototype.pageToPdf = function (ele, pdfFileName) {
console.log(ele.clientHeight, 'clientHeight ')
let loadingInstance = Loading.service({text: '正在导出，请稍等'});
let eleW = ele.offsetWidth // 获得该容器的宽
// let eleH = ele.offsetHeight // 获得该容器的高
let eleH = ele.scrollHeight // 获得该容器的高
let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
var canvas = document.createElement('canvas')
var abs = 0
let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) {
// abs = (win_o - win_i)/2; // 获得滚动条长度的一半
abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
}
canvas.width = eleW * 2 // 将画布宽&&高放大两倍
canvas.height = eleH * 2
var context = canvas.getContext('2d')
context.scale(2, 2) // 增强图片清晰度
context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0;
html2canvas(ele, {
dpi: 900,
// scrolly: 0,
// width:eleW,//生成后的宽度
// height:eleH,//生成后的高度
// scrollx: -10,
useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
// backgroundColor: null //避免图片有白色边框
}).then(canvas => {
var contentWidth = canvas.width
var contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (contentWidth / 552.28) * 841.89 // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
//未生成pdf的html页面高度
var leftHeight = contentHeight + 10591
//页面偏移
var position = 0
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
// var pdfX = ((contentWidth + 10) / 2) * 0.75
// var pdfY = ((contentHeight + 500) / 2) * 0.75 // 500为底部留白
var imgWidth = ((contentWidth + 10) / 2) * 0.75
var imgHeight = (imgWidth / contentWidth) * contentHeight
console.log(imgHeight)
//a4纸的尺寸[595.28,841.89],单位像素，html页面生成的canvas在pdf中图片的宽高
var pageData = canvas.toDataURL('image/jpeg', 1.0)
console.log(pageData, '============================')
var pdf = JsPDF('', 'px', [imgWidth , 874.2])
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
// pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
// 分页
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 874.8
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
pdf.save(pdfFileName + '.pdf')
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
})
}