Как сделать html разрыв страницы более точным и совместимым со всеми типами клиентов P C? - PullRequest
Новая
       88

Как сделать html разрыв страницы более точным и совместимым со всеми типами клиентов P C?

0 голосов
/ 06 августа 2020

Я использую html2canvas и jspdf для преобразования html в pdf для печати. ​​

И я должен рассчитать разрывы страниц для себя в этом состоянии.

Вот мои коды для вычисление разрывов страниц.

Но он может работать только на некоторых типах ПК, я обнаружил, что он не будет рассчитан точно для высокого разрешения p c.

Любая помощь будет очень признателен. 


const jsPdfPageSize = jsPDF.getPageSize('', 'px', 'a4')
const pxPageHeight = isLandscape ? jsPdfPageSize.width : jsPdfPageSize.height; 

function calculatePageBreaks (isLandscape) {
    // dom to be calculate
    const computeItemSelectorArray = [
        ".ant-table-content tr",
        ".attachment_body",
        ".bill_block .bill_row",
        ".block_expense_detail div[class*=bxExpenseRecord__table_row]",
        ".bill_field.auxiliaryField"
    ]
    const trArray = $(computeItemSelectorArray.join(','), $('#print-iframe').get(0).contentWindow.document);
    for (let index = 8; index < trArray.length; index++) {
        const trItem = trArray[index];
        const itemHeight = $(trItem).height();
        if (!itemHeight) {
            continue;
        }
        const offsetTop = $(trItem).offset().top;
        let startPage = Math.floor(offsetTop / pxPageHeight);
        let endPage = (offsetTop + itemHeight) / pxPageHeight;
        // dom page break
        if (startPage !== Math.floor(endPage)) {
            // add a blank row
            const blankHeight = pxPageHeight * (startPage + 1) - offsetTop;

            const pagePaddingTop = isLandscape ? 21 : 26;
            let insertItem = trItem;
 
            $(`<${trItem.tagName} class="pageBreakBlock" style='height:${blankHeight}px;width:100%'></${trItem.tagName}>`).insertBefore(insertItem);
            $(`<${trItem.tagName} class="pageBreakBlock" style='height:${pagePaddingTop}px;width:100%'></${trItem.tagName}>`).insertBefore(insertItem);
            
            index = index + (isLandscape ? 5 : 8);
        }
    };
}


// jspdf
 let contentWidth = canvas.width;
 let contentHeight = canvas.height;
 let pageData = canvas.toDataURL('image/jpeg', 1.0);

 const heightA4Pt = isLandscape ? 595.28 : 841.89;
 const widthA4Pt = isLandscape ? 841.89 : 595.28;
 const ratio = heightA4Pt / widthA4Pt;

 let pageHeight = contentWidth * ratio; // / a4WidthPt * a4HeightPt;
                
 let leftHeight = contentHeight;
                
 let imgWidth = widthA4Pt - 10; // 595.28;
 let imgHeight = widthA4Pt / contentWidth * contentHeight - 55;
 var position = 0;
 if (!pdfObj || !isPatch) {
    pdfObj = new jsPDF(isLandscape ? 'l' : '', 'pt', 'a4');
    pdfObj.setProperties({title: params.pageName});
 } else {
    pdfObj.addPage(null, isLandscape ? 'l' : 'p'); // 批量 新开页
 }
                
 if (leftHeight < pageHeight) {
    pdfObj.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
 } else {
    while (leftHeight > 0) {
      pdfObj.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= heightA4Pt;
      if (leftHeight > 0) {
         pdfObj.addPage();
      }
   }
 }

Вот некоторые ситуации, которые не рассчитываются точно по выигрышам 10 p c.

P1: enter image description here

P2: enter image description here

It works fine for my mac pc. введите описание изображения здесь

...