javascript - jsPDF 在特定的 Html 文件中总是返回空白

Question

我正在使用 jsPDF autoTable 来打印 pdf 文件，在我的 mproyect 中，使用 Angular 7 在所有 html 中都工作得很好，但由于某种原因，在一个特定的 html 文件中却不能，它会下载文件，但处于“空白”模式，如果附加成功打印的图像，则错误如下:

jspdf.plugin.autotable.js:564 Html table could not be found with input:  tableGuias

它找不到声明的 html 输入，我的问题是为什么。

我尝试在那里创建的任何表格都不起作用，这里我创建一个虚拟表格来向您展示。

<table id="tableGuias">
  <thead>
    <th>Dummy Header</th>
  </thead>
  <tbody>
    <td>Simple Test</td>
  </tbody>
</table>

现在让我们看看 TypeScript 文件:

    getPdfFromHtml() {
      const  idTable = document.getElementById('tableGuias');
      const doc = new jsPDF('landscape');
      doc.autoTable( { html: idTable });
      setTimeout(function() {
          doc.save('tableGuias.pdf');
      }, 1000 );
    }

组件被很好地配置到@Component装饰器中，因此Html和ts文件是连接的。 setTimeout 只是因为我之前读过，也许可以解决问题，这不是我的情况。

使用 getElementById() 或 getElementByClassName()，或者只是声明 #table 标签表，不起作用。

无法弄清楚发生了什么。我一直认为某些错误可能会中断该方法，但除了第一个错误之外，控制台不会抛出任何错误。

Answer 1

您可以简单地替换:

doc.autoTable( { html: idTable });

与

var res = doc.autoTableHtmlToJson(idTable);
doc.autoTable(res.columns, res.data);

获得所需的输出。

演示:

function getPdfFromHtml() {
  const idTable = document.getElementById('tableGuias');
  const doc = new jsPDF('landscape');

  var res = doc.autoTableHtmlToJson(idTable);
  doc.autoTable(res.columns, res.data);

  setTimeout(function() {
    doc.save('tableGuias.pdf');
  }, 1000);
}

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

<!-- EDIT: For now, add this line between the libraries -->
<!-- The reason being that jspdf includes a version of requirejs which -->
<!-- jspdf-autotable currently is not expecting. You can also use version < 2.0.21 -->
<script>
  if (window.define) delete window.define.amd;
</script>

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

<button onclick="getPdfFromHtml()">Download PDF</button>

<table id="tableGuias">
  <thead>
    <th>Dummy Header</th>
  </thead>
  <tbody>
    <td>Simple Test</td>
  </tbody>
</table>

此外，您还可以使用

const doc = new jsPDF('p', 'pt');

为大型表格提供更好看的输出的选项，例如:

演示:

function getPdfFromHtml() {
  const idTable = document.getElementById('tableGuias');
  const doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(idTable);
  doc.autoTable(res.columns, res.data);

  setTimeout(function() {
    doc.save('tableGuias.pdf');
  }, 1000);
}

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

<!-- EDIT: For now, add this line between the libraries -->
<!-- The reason being that jspdf includes a version of requirejs which -->
<!-- jspdf-autotable currently is not expecting. You can also use version < 2.0.21 -->
<script>
  if (window.define) delete window.define.amd;
</script>

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

<button onclick="getPdfFromHtml()">Download PDF</button>

<table id="tableGuias">
  <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>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</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>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</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>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>