如何在 pdf 文档中放置 jspdf 自动表？答案

【问题标题】：How to fit a jspdf autotable in a pdf document?如何在 pdf 文档中放置 jspdf 自动表？
【发布时间】：2020-08-21 02:03:05
【问题描述】：

我正在尝试使用 jspdf autotable 插件将表格放入 pdf 中，但由于某种原因，单元格中的文本被截断。即使文本很长，如何在单元格中显示整个文本，单元格应该包装文本并显示它。我怎样才能做到这一点？

function demoFromHTML(source) {
  var columns = ["PatientNumber", "PatientName", "Prescription", "MobileNumber", "Address", "DatePrescribed"]

  // Only pt supported (not mm or in)
  var doc = new jsPDF('p', 'pt');
  doc.autoTable(columns, source);
  doc.save('table.pdf');
}

【问题讨论】：

标签： jquery jspdf

【解决方案1】：

 var pdf = new jsPDF('p', 'pt', 'a4');

//Estadísticas
var tablaDatos = $('.tb-info');

var data = pdf.autoTableHtmlToJson(tablaDatos[0]);
var imgElements = tablaDatos[0].querySelectorAll('tbody img');
var images = [];

pdf.autoTable(data.columns, data.rows, {
  startY: 100,
  margin: {
    right: 20,
    left: 50
  },
  tableWidth: 500,
  styles: {
    overflow: 'linebreak',
    columnWidth: 'wrap',
    rowHeight:'wra',
    lineWidth: 1
  },
  columnStyles: {
    0: {
      columnWidth: 130
    },
    1: {
      columnWidth: 350
    },
    columnWidth: 'wrap'
  },
  rowStyles: {
    0: {rowHeight: 150}
  },

  createdCell: function(cell, opts) {
  cell.styles.cellPadding = {vertical: 50};
},
  rowHeight:'wra',
  drawCell: function(cell, opts) {
    if (opts.column.dataKey === 0 && opts.row.index < data.rows.length) {
      images.push({
        elem: imgElements[opts.row.index],
        x: cell.textPos.x,
        y: cell.textPos.y
      });
    }
  },
   addPageContent: function() {
    for (var i = 0; i < images.length; i++) {
      if (!images[i].isLoad) {
        pdf.addImage(images[i].elem, images[i].x + 20, images[i].y - 25);
        images[i].isLoad = true;
      }
    }
  }

});

使用这些脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.1/jspdf.plugin.autotable.min.js"></script>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

【讨论】：

【解决方案2】：

document.getElementById('pdf').onclick = function() {
  var doc = new jsPDF('p', 'pt');
  var res = doc.autoTableHtmlToJson(document.getElementById('table'));
  var height = doc.internal.pageSize.height;
  doc.text("Generated PDF", 50, 50);
  doc.autoTable(res.columns, res.data, {
    startY: 200
  });
  doc.autoTable(res.columns, res.data, {
    startY: doc.autoTableEndPosY() + 50
  });
  doc.autoTable(res.columns, res.data, {
    startY: height,
    afterPageContent: function(data) {
      doc.setFontSize(20)
      doc.text("After page content", 50, height - data.settings.margin.bottom - 20);
    }
  });
  doc.save('Generated PDF.pdf');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/MrRio/jsPDF/master/dist/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<button id="pdf">Generate PDF</button>
<table id="table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

【讨论】：