首页 文章

如何使用jspdf，jspdf-autotable来适应宽表

提问于
浏览 次
5

我正在使用jspdf与插件jspdf-autotable为一个非常宽的表创建一个pdf，有没有办法自动将表/列数据适合任何页面大小？

我尝试了下面的代码溢出：'linebreak'，但它打破了半空而不是在空白处

function demoPDF() {
  var pdfsize = 'a0';
  var pdf = new jsPDF('l', 'pt', pdfsize);

  var res = pdf.autoTableHtmlToJson(document.getElementById("rpt_tbl"));
  pdf.autoTable(res.columns, res.data, {
    startY: 60,
    tableWidth: 'auto',
    columnWidth: 'auto',
    styles: {
      overflow: 'linebreak'
    }
  });

  pdf.save(pdfsize + ".pdf");
};
jspdf jspdf-autotable

1 回答

  • 8

    我不完全确定我理解你的问题，但是如果你想要一些专栏来简单地包装内容而有些专栏也是如此，你可以这样做 .

    function demoPDF() {
  var pdfsize = 'a0';
  var pdf = new jsPDF('l', 'pt', pdfsize);

  var res = pdf.autoTableHtmlToJson(document.getElementById("table"));
  pdf.autoTable(res.columns, res.data, {
    startY: 60,
    styles: {
      overflow: 'linebreak',
      fontSize: 50,
      rowHeight: 60,
      columnWidth: 'wrap'
    },
    columnStyles: {
      1: {columnWidth: 'auto'}
    }
  });

  pdf.save(pdfsize + ".pdf");
};

demoPDF();

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>

<table id="table" style="display: none;">
    <thead>
    <tr>
        <th title="Field #1">ID</th>
        <th title="Field #2">First name</th>
        <th title="Field #3">Last name</th>
        <th title="Field #4">Email</th>
        <th title="Field #5">Country</th>
        <th title="Field #6">IP-address</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td align="right">1</td>
        <td>Donna</td>
        <td>Moore</td>
        <td>dmoore0@furl.net</td>
        <td>China</td>
        <td>211.56.242.221</td>
    </tr>
    <tr>
        <td align="right">2</td>
        <td>Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice Janice</td>
        <td>Henry</td>
        <td>jhenry1@theatlantic.com</td>
        <td>Ukraine</td>
        <td>38.36.7.199</td>
    </tr>
    <tr>
        <td align="right">3</td>
        <td>Ruth</td>
        <td>Wells</td>
        <td>rwells2@constantcontact.com</td>
        <td>Trinidad</td>
        <td>19.162.133.184</td>
    </tr>
    <tr>
        <td align="right">4</td>
        <td>Jason</td>
        <td>Ray</td>
        <td>jray3@psu.edu</td>
        <td>Brazil</td>
        <td>10.68.11.42</td>
    </tr>
    <tr>
        <td align="right">5</td>
        <td>Jane</td>
        <td>Stephens</td>
        <td>jstephens4@go.com</td>
        <td>United States</td>
        <td>47.32.129.71</td>
    </tr>
    <tr>
        <td align="right">6</td>
        <td>Adam</td>
        <td>Nichols</td>
        <td>anichols5@com.com</td>
        <td>Canada</td>
        <td>18.186.38.37</td>
    </tr>
    </tbody>
</table>
    回复于

相关问题