生成的pdf只有頁面窗口可見的區(qū)域，有滾動(dòng)條的下面沒有生成出來。如果截取是body的這個(gè)層級(jí)，而剛好body設(shè)置了overflow: hidden;那超出的部分是永遠(yuǎn)截取不到的，因?yàn)檫@個(gè)節(jié)點(diǎn)的dom高就是窗口可見的高度，并不包含滾動(dòng)條多出來的部分。只需要在導(dǎo)出之前將overflow:aotu設(shè)置成visible(默認(rèn)即可)；導(dǎo)出提后再設(shè)置回去。

代碼

export() {

? ? ? ? console.log('導(dǎo)出');

? ? ? ? $('.right-div').css({

? ? ? ? ? ? 'overflow-y': 'visible',

? ? ? ? ? ? 'height': 'auto'

? ? ? ? });

? ? ? ? let export_content = $('#export_content');

? ? ? ? let copyDom = $('<div/>');

? ? ? ? copyDom.addClass('super');

? ? ? ? copyDom.width(export_content.width() + 'px');

? ? ? ? copyDom.height(export_content.height() + 'px');

? ? ? ? $('body').append(copyDom);

? ? ? ? let cont = document.getElementById('export_content');

? ? ? ? html2canvas(export_content, {

? ? ? ? ? ? onrendered: (canvas) => {

? ? ? ? ? ? ? ? let cW = canvas.width; // 955

? ? ? ? ? ? ? ? ? ? let cH = canvas.height; // 2965

? ? ? ? ? ? ? ? ? ? // 一頁pdf顯示html頁面生成的canvas高度;

? ? ? ? ? ? ? ? ? ? let pageH = cW / 592.28 * 841.89; // 1357.4744208820155

? ? ? ? ? ? ? ? ? ? // 未生成pdf的html頁面高度

? ? ? ? ? ? ? ? ? ? let leftH = cH; // 2965

? ? ? ? ? ? ? ? ? ? // pdf頁面偏移

? ? ? ? ? ? ? ? ? ? let position = 0;

? ? ? ? ? ? ? ? ? ? // a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高

? ? ? ? ? ? ? ? ? ? let imgW = 595.28;

? ? ? ? ? ? ? ? ? ? let imgH = 592.28 / cW * cH;

? ? ? ? ? ? ? ? ? ? console.log(cW, cH, pageH, leftH, position, imgW, imgH);

? ? ? ? ? ? ? ? ? ? let pageData = canvas.toDataURL('image/jpeg', 1.0);

? ? ? ? ? ? ? ? ? ? let pdf = new jsPDF('', 'pt', 'a4');

? ? ? ? ? ? ? ? ? ? // 有兩個(gè)高度需要區(qū)分，一個(gè)是html頁面的實(shí)際高度，和生成pdf的頁面高度(841.89)

? ? ? ? ? ? ? ? ? ? // 當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁

? ? ? ? ? ? ? ? ? ? if (leftH < pageH) {

? ? ? ? ? ? ? ? ? ? ? ? pdf.addImage(pageData, 'JPEG', 0, position, imgW, imgH);

? ? ? ? ? ? ? ? ? ? }else {

? ? ? ? ? ? ? ? ? ? ? ? while (leftH > 0) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? pdf.addImage(pageData, 'JPEG', 0, position, imgW, imgH);

? ? ? ? ? ? ? ? ? ? ? ? ? ? leftH -= pageH;

? ? ? ? ? ? ? ? ? ? ? ? ? ? position -= 841.89;

? ? ? ? ? ? ? ? ? ? ? ? ? ? // 避免添加空白頁

? ? ? ? ? ? ? ? ? ? ? ? ? ? if (leftH > 0) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? pdf.addPage();

? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? pdf.save('content.pdf');

? ? ? ? ? ? ? ? ? ? $('.super').remove();

? ? ? ? ? ? ? ? ? ? $('.right-div').css({

? ? ? ? ? ? ? ? ? ? ? ? 'overflow-y': 'auto',

? ? ? ? ? ? ? ? ? ? ? ? 'height': '100%'

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? background: '#fff'

? ? ? ? });

? ? }