整理表格和JSPDF样式问题

Question

整理表格和JSPDF样式问题

3

我在我的html页面中有一些div，我想将其制作为pdf。这是一个包含多个表格的页面，每个表格/标题都在新页面上开始。

我正在使用的是jspdf，并且已经实现了根据div类开始新页面的目标。我尝试的代码如下：

  $('#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行。

提前感谢您。

- dooooooofai

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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