Блог

У меня есть какой-то div на моей html-странице, я хочу сделать его в формате pdf. Это страница с несколькими таблицами, и каждый заголовок / таблица начинаются на новой странице.

Тот, который я использую, — это jspdf, и я уже достиг своей цели-начать новую страницу на основе класса div. Код, который я пробую, вот этот :

https://plnkr.co/edit/DmNuINbijP1tu4cW

   $('#printbutton').on("click", function () { 

  var pdf = new jsPDF('landscape');
 //  var pdf = new jsPDF('p','pt','a4');
   var pdfName = 'test.pdf';
var imagesToResize = document.getElementsByTagName("img");
 for(i=0;i<imagesToResize.length;i  ){
   imagesToResize[i].style.width = "100px";
   imagesToResize[i].style.height = "100px";
 }
    var options = {   pagesplit: true};

    var $divs = $('.myDivClass')   
  //jQuery object of all the myDivClass divs
    var numRecursionsNeeded = $divs.length -1;     //the number of times we need to call addHtml (once per div)
    var currentRecursion=0;
                  
    //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
    function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
        //Once we have done all the divs save the pdf
        if(currentRecursion==totalRecursions){
            pdf.save(pdfName);
        }else{
             currentRecursion  ;
            pdf.addPage();
            //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
            //addHtml requires an html element. Not a string like fromHtml.
            pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                console.log(currentRecursion);
                recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
            });
        }
    }

    pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
        recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
    });
});
 

Проблема в том, что таблица довольно грязная, ее ширина не полностью совпадает с шириной бумаги, и каким-то образом она показывает две строки на одной странице (и в начале страницы есть пустая строка).

Есть ли что-то неправильное в коде? моя цель состоит в том, чтобы сделать таблицу читаемой и по крайней мере > 10 строк отображались на одной странице.

Заранее благодарю вас

Это tableWidth: 'auto' должно работать идеально. В любом случае,

Я попробовал следующий стиль и свойства для своей таблицы, и он отлично работает.

 pdf.autoTable(res2.columns, res2.data, {
     startY: false,
     theme: 'grid',
     tableWidth: 'auto',
     columnWidth: 'wrap',
     showHeader: 'everyPage',
     tableLineColor: 200,
     tableLineWidth: 0,
     columnStyles: {
         0: {
             columnWidth: 50
         },
         1: {
             columnWidth: 50
         },
         2: {
             columnWidth: 50
         },
         3: {
             columnWidth: 50
         },
         4: {
             columnWidth: 50
         },
         5: {
             columnWidth: 'auto'
         },
         6: {
             columnWidth: 50
         },
         7: {
             columnWidth: 50
         },
         8: {
             columnWidth: 'auto'
         }
     },
     headerStyles: {
         theme: 'grid'
     },
     styles: {
         overflow: 'linebreak',
         columnWidth: 'wrap',
         font: 'arial',
         fontSize: 10,
         cellPadding: 8,
         overflowColumns: 'linebreak'
     },
 });