Блог

Хотя есть много ответов для печати номера страницы с помощью CSS. Наиболее распространенный способ добавления номера страницы с помощью counter , предложенного в этой статье. Это работает, когда содержимое страницы меньше. Но когда содержимое внутри div большое, в этом контексте номер страницы виден, но он повторяется.

Я пытаюсь напечатать большую таблицу, которая разделена на n несколько страниц. В этом случае я попытался использовать tfoot это, но номер страницы повторяется. Я хочу, чтобы номер страницы увеличивался на страницу 1, 2,… с ее данными и дизайном (CSS).

Я попробовал jsPDF, он отлично работает для номера страницы, но не может реализовать свой дизайн, так как при преобразовании моего html в pdf он теряет весь мой CSS. Я пробовал этот способ в jsPDF

 const htmlToPrint = this.pdfTable.nativeElement;
const doc = new jsPDF();
console.log(doc.getFontList());
doc.setFont('times','normal','normal');
doc.setFontSize(12);
doc.html(htmlToPrint, {
  fontFaces:[
    {
      family:"Times-Roman",
      style:"normal",
      src:[
        {
          url:"/assets/fonts/TIMES.ttf",
          format:"truetype"
        }
      ]
    }
  ],
  callback: function (doc) {
    const pageCount = doc.getNumberOfPages(); //Total Page Number
    for (var i = 0; i < pageCount; i  ) {
      doc.setPage(i);

      let pageCurrent = doc.getCurrentPageInfo().pageNumber; //Current Page
      doc.setFontSize(12);
      doc.text(''   pageCurrent, 196, 285);
    }

    doc.save("myDemo.pdf");
  },
  x: 10,
  y: 10
});
 

Я пробовал pdf-make для той же цели , но когда я конвертирую свой HTML в формат JSON, размер JSON 20mb увеличивается, он занимает всю память браузера, и окно браузера разбивается.

Мое требование-распечатать большую таблицу с ее CSS и данными в виде книги. Как я могу двигаться вперед, чтобы выполнить свои требования. Я пытаюсь найти решение через Интернет, но ни одно из них не работает правильно для меня. Как распечатать большую html-таблицу с ее CSS и номером страницы в ней.

У меня вроде как была похожая проблема не так давно. Следует алгоритму моего решения.

• Преобразует из DOM(‘div’) в изображение;
• Вырезать/разделить изображение, чтобы оно поместилось на одной странице;
• Добавление изображений в pdf;

 const element = document.getElementbyId('myTable');
const MAX_HEIGHT_PDF_PAGE = 800;//in px
let doc = new jsPdf();

domtoimage.toPng(element).then((imageDataUrl)=> {
  //get element height;  
  
  //numberOfPages necessary = elementHeight / MAX_HEIGHT_PDF_PAGE
  
  // split imageDateUrl into pages, we're gonna get an imageArr
  let imageArr = [];
  for(let image of imageArr) {//addpages and images to pdf
    doc.addPage();
    doc.addImage(image, 'PNG',x, y, width, height);
  }  
})

//dump js pdf
doc.output('dataurl');
 

Редактировать(код для преобразования pdf -> изображение)

 function _pdfToJpeg(doc) {
  //load pdf with lib pdf.js
  let pdf = await pdfjsLib.getDocument({data: doc.output('arraybuffer')}).promise;
  let jpegBase64Arr = [];

  for(let i = 1; i <= this.totalPages; i  ) {//iter through pages
    //load page 
    let page = await pdf.getPage(i);
    let vp = page.getViewport({scale: 1.0});

    //dummy canvas just to render pdf page
    let c = document.createElement('canvas');
    let ctx = c.getContext('2d');
    c.width = vp.width;
    c.height = vp.height;

    let renderCtx = {
      canvasContext: ctx,
      viewport: vp
    };

    //render page on a canvas 
    await page.render(renderCtx).promise;

    //convert pdf on the canvas and converts to image
    jpegBase64Arr.push(c.toDataURL('image/jpeg', 1));
    c.remove();
  }

  return new Promise(resolve=> resolve(jpegBase64Arr));//array of images(pdfs pages)
}
 

• Lib использовал: https://mozilla.github.io/pdf.js/examples/

Примечание:

Я не совсем уверен в синтаксисе.

К сожалению, jspdf не работает с css, но вы можете использовать jspdf вместе с html2canvas.

  var doc = new jsPDF('p', 'pt', 'letter');
 doc.addHTML($('#htmlToPrint')[0], function () {
     doc.save('Test.pdf');
 });
 

Добавьте HTML2Canvas JS, а затем используйте doc.addHTML()