引用的js文件
<!--pdf文件导出-->
<script src="/XXX/bluebird.js"></script>
<script src="/XXX/jspdf.debug.js"></script>
<script src="/XXX/jspdf.plugin.autotable.js"></script>
<script src="/XXX/html2canvas.min.js"></script>
文件内容上传到了压缩包里面,解压即可。
html添加导出按钮
<i-button size="small" @click="downloadPdf">导出pdf</i-button>
html导出指定区域内容(div标签绑定id值)
<div id="test" >
...导出的内容
</div>
pdf导出方法
downloadPdf() {
let that = this;
// 获取表格元素(导出指定区域内容)
var table = document.querySelector("#test");
// 使用html2canvas将表格转换为Canvas图像
html2canvas(table, {
scale:1,
height: table.scrollHeight,//canvas高
width: table.scrollWidth,//canvas宽
allowTaint: true,
useCORS: true,
dpi: 120, // 图片清晰度问题
background: '#FFFFFF', //如果指定的div没有设置背景色会默认成黑色,这里是个坑
}).then(canvas => {
var leftHeight = canvas.height;
// var a4Width = 595.28;
// var a4Height = 841.89; //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
// 我这边自己调整了宽高
var a4Width = 842;
var a4Height = 1417;
//一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
//pdf页面偏移
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
// var pdf = new jsPDF('p', 'pt', 'a4'); //A4纸,纵向
var pdf = new jsPDF({
orientation: 'p', // p/portrait:竖着, l/landscape:横着(打印横向、纵向配置)
unit: 'pt', // 单位: "pt", "mm", "cm", "m", "in" or "px".
// format: 'a4', // string 'a4' or [width,height]
format: [1417, 842], // 210mm×297mm a4纸张大小
margins: [20, 20, 20, 20]
});
var index = 1,
canvas1 = document.createElement('canvas'),
height;
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
var pdfName = '测试';
function createImpl(canvas) {
if (leftHeight > 0) {
index++;
var checkCount = 0;
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef;
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true;
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data;
if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
isWrite = false;
break;
}
}
if (isWrite) {
checkCount++;
if (checkCount >= 10) {
break
}
} else {
checkCount = 0
}
}
height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
if (height <= 0) {
height = a4HeightRef;
}
} else {
height = leftHeight;
}
canvas1.width = canvas.width;
canvas1.height = height;
var ctx = canvas1.getContext('2d');
ctx.drawImage(
canvas,
0,
position,
canvas.width,
height,
0,
0,
canvas.width,
height,
);
var pageHeight = Math.round((a4Width / canvas.width) * height);
if (position != 0) {
pdf.addPage();
}
pdf.addImage(
canvas1.toDataURL('image/jpeg', 1.0),
'JPEG',
10,
10,
a4Width,
(a4Width / canvas1.width) * height,
);
leftHeight -= height;
position += height;
if (leftHeight > 0) {
setTimeout(createImpl, 500, canvas)
} else {
// 导出pdf文件
pdf.save(pdfName + '.pdf');
// 转base64
let buffer = pdf.output("datauristring");
let file = that.convertBase64ToFile(buffer, that.title);
}
}
}
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(
pageData,
'JPEG',
0,
0,
a4Width,
(a4Width / canvas.width) * leftHeight,
);
// 导出pdf文件
pdf.save(pdfName + '.pdf');
// 转base64
let buffer = pdf.output("datauristring");
let file = that.convertBase64ToFile(buffer, that.title);
} else {
try {
pdf.deletePage(0);
setTimeout(createImpl, 500, canvas)
} catch (err) {
// console.log(err);
}
}
});
/**
* base64转文件
* @param urlData 数据
* @param filename 文件名
* @returns {*}
*/
convertBase64ToFile(urlData, filename) {
var arr = urlData.split('base64,');
var type = arr[0].match(/:(.*?);/)[1];
var fileExt = type.split('/')[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename + "." + fileExt, {
type: type
});
},