hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-23 09:46:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

提交pdf导出的整理

Browse Source
This commit is contained in:
daihh
2022-10-18 20:47:57 +08:00
parent b1926eba4e
commit 75c315c462
2 changed files with 53 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/utils/htmlToPdf.js
View File

@@ -46,52 +46,66 @@ const htmlToPdf = {
//所有的图片都加上
let imgList=dom.querySelectorAll('img');
//console.log('imgList',imgList)
imgList.forEach(function(item){
item.crossOrigin= 'anonymous';
//item.src =item.src+'?v='+Math.random()
//document.body.appendChild(convertImageToCanvas(item))
})
let domBody=dom.querySelector('.export-dialog-body');
//console.log(domBody,'domBody')
let clientHeight=domBody.clientHeight;
let contentHeight=domBody.scrollHeight;
//console.log(domBody.clientHeight,'domBody.clientHeight')
//console.log(domBody.scrollHeight,'domBody.scrollHeight')
// console.log(domBody.clientHeight,'domBody.clientHeight')
// console.log(domBody.clientHeight,'domBody.clientHeight')
//export-dialog-body
//let dom=document.querySelector('#'+domId);
//console.log(dom.length,'dom.length');
setTimeout(() => {
html2Canvas(dom, {allowTaint: false,useCORS:true}).then(canvas=>{
//内容的宽度
let contentWidth = canvas.width;
//内容高度
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
let pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 841.89 / contentWidth * contentHeight;
// let imgHeight = 592.28 / contentWidth * contentHeight;
//canvas转图片数据
let pageData = canvas.toDataURL('image/jpeg', 1.0);
//新建JsPDF对象
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()
}
//return;
html2Canvas(dom, {
allowTaint: false,
useCORS:true,
async: true,
scale: '1', // 放大倍数
dpi: '192',
scrollY: dom.top, // 关键代码，截取长度
height: dom.height // 加高度，避免截取不全
}).then(canvas=>{
//内容的宽度
let contentWidth = canvas.width;
//内容高度
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
let pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 841.89 / contentWidth * contentHeight;
// let imgHeight = 592.28 / contentWidth * contentHeight;
//canvas转图片数据
let pageData = canvas.toDataURL('image/jpeg', 1.0);
//新建JsPDF对象
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()
}
}
//保存文件
PDF.save('我的笔记.pdf')
}
//保存文件
PDF.save('我的笔记.pdf')
});
})
},500);
}
};