在jspdf上制作更整洁的表格和样式问题

Question

我的 html 页面中有一些 div，我想将其设为 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 行。

提前谢谢你

Answer 1

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'
     },
 });