js生成pdf文件并下载

function download() {

document.getElementById('loading').style.display ='block';

document.getElementById('print').style = 'display:none'

document.getElementById('download').style = 'display:none'

getDomList('tuxiangfenxi_1', true, 20)

getDomList('snengshuzhi_box', true, 20)

let domList = document.getElementsByClassName('download_page')

var a4Width = 592.28;

var a4Height = (document.getElementById('render_panel').scrollWidth / a4Width) * 841.89

var pageHeight = (document.getElementById('render_panel').scrollWidth / a4Width) * 841.89;

for (let k = 0; k < domList.length; k++) {

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

let clientHeight = domList[k].getBoundingClientRect().y + scrollTop

let topHeight = Math.ceil((domList[k].getBoundingClientRect().y + scrollTop) / pageHeight)

let bottomheight = Math.ceil((domList[k].getBoundingClientRect().y + scrollTop + domList[k].offsetHeight) / pageHeight)

if (topHeight != bottomheight) {

let paddingHeight = topHeight * pageHeight - (domList[k].getBoundingClientRect().y + scrollTop) + 30

let node = document.createElement('div')

node.className = 'add_div'

node.style = `width:100%; height:${paddingHeight}px`

domList[k].parentNode.insertBefore(node, domList[k])

}

}

var element = document.getElementById('downloadDom')

var canvas = document.createElement("canvas");

var context = canvas.getContext("2d");

 

html2canvas(element,

{

useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片

async:false,

allowTaint: true,

scale:0.8,

scrollY: 0,

scrollX: 0,

imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒

height: element.scrollHeight, // canvas的高度设定

width: element.offsetWidth, // canvas的宽度设定

dpi: window.devicePixelRatio * 1, // 将分辨率提高到特定的DPI

}).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 = 592.28;

var imgHeight = 592.28 / contentWidth * contentHeight;

context.drawImage(img, imgWidth, imgHeight+500);

var pageData = canvas.toDataURL('image/jpeg', 0.4);

const { jsPDF } = window.jspdf;

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();

}

}

}

let str = JSON.parse(localStorage.getItem('res')).data.member.realName + '-' + JSON.parse(localStorage.getItem('res')).data.member.phone + '.pdf'

pdf.save(str);

let addList = document.getElementsByClassName('add_div')

document.getElementById('print').style = 'display:block'

document.getElementById('download').style = 'display:block'

getDomList('tuxiangfenxi_1', false, 20)

getDomList('snengshuzhi_box', false, 20)

// getDomList('igmsee_item_div',false,15)

for (let k of addList) {

k.style = 'display:none'

}

document.getElementById('loading').style.display ='none';

})

}