JSPDF 为什么我在 pdf 中得到这个结果 Vertical ？

Question

我正在使用 Jspdf 库将结果从 HTML 转换为 pdf。所以在我的例子中，为什么我在垂直方向而不是水平方向得到这个结果？我的 HTML 模板代码是

<table id="customers" class="table-wide">';
htmlStr += '<thead></thead>';
htmlStr += '<tbody></tbody>';
htmlStr += '</table>';

我在这个 For 循环中得到这个结果并从 ID

 for(var i = 0; i < features.length; ++i)
    {
        if(features[i].geometry != null){
           var data = features[i].attributes.data;
            tr = $('<tr></tr>');

            layer.fields.each(function(field) {
                var td = $('<td></td>');
                if(data[field.id] != null)td.text(data[field.id]);
                //console.log(td);
                console.log(JSON.stringify(data[2353]));
                tr.append(td);


            }

对于代码生成，我是这样做的。

 var pdf = new jsPDF('p', 'pt', 'letter');
           source = $('#customers')[0];

           specialElementHandlers = {
               '#bypassme': function (element, renderer) {
                   return true
               }
           };
           margins = {
              top: 80,
              bottom: 60,
              left: 40, 
               width: 522
           };

           pdf.fromHTML(
               source,
               margins.left,
               margins.top, {
                   'width': margins.width, // max width of content on PDF
                   'elementHandlers': specialElementHandlers
               },


               function (dispose) {
                   // pdf.save('Test.pdf');
               });
            pdf.output('dataurlnewwindow');
       }


                   // pdf.save('Test.pdf');
               });
            pdf.output('dataurlnewwindow');
       }

Answer 1

将要导出的内容包装在容器中。并确保您的 table 正确生成

这里#content是容器。定位容器的内部 HTML 内容。

<div id="content">

  <p>This is a demo for exporting PDF from html using jsPDF.
  </p>
  <br>

  <table id="demo" class="table table-bordered">
    <thead>
      <tr>
        <th>Serial Number</th>
        <th>Name</th>
        <th>Percentile</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>James</td>
        <td>8.9</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Harry</td>
        <td>7.6</td>
      </tr>
    </tbody>
  </table>

  <div>
    <button class="btn" id="export">Save</button>
  </div>


</div>

//Html source 
var source = document.getElementById('content').innerHTML;

var margins = {
  top: 10,
  bottom: 10,
  left: 10,
  width: 700
};

doc.fromHTML(
  source, // HTML string or DOM elem ref.
  margins.left,
  margins.top, {
    'width': margins.width,
    'elementHandlers': specialElementHandlers
  },

  function(dispose) {
    // dispose: object with X, Y of the last line add to the PDF 
    //          this allow the insertion of new lines after html
    doc.save('Test.pdf');
  }, margins);

更详细的实现请参考这里https://jsfiddle.net/Purushoth/bor1nggb/

此外，对于 table 导出，您可以使用 jsPDF-Autotable 插件。以下是自定义 table 的更多示例。 https://simonbengtsson.github.io/jsPDF-AutoTable/

JSPDF 为什么我在 pdf 中得到这个结果 Vertical ？

JSPDF Why I am getting this result Vertical in pdf ?

html

javascript

jspdf