Question

我正在开发一个生成大量简单报告的应用程序。该报告位于表格元素中。这只是文字，没什么特别的。在运行之前，我不知道大小（列和行），因此有些列可能只是几列，而其他列可能非常宽。

该应用程序是用HTML和AngularJS编写的。它从C＃Web API获取数据，但无法更改API以返回格式化报告。 :(所以我需要在客户端这样做。

我尝试了这个组件（https://github.com/hearsid/ng-html-to-pdf-save），但它根本不喜欢table元素，只打印出一个相当小的表的最后一列。我确实喜欢它的实施方式。

您可以使用哪些客户端PDF解决方案可靠地使用该工作？欢迎角度友好的解决方案，但不是必需的。不过我们很快就会转向Angular 5.

由于

Answer 1

正如@Dai建议的那样，你可以使用jspdf轻松实现这一目标。

var doc = new jsPDF()
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    },
    '.controls': function (element, renderer) {
        return true;
    }
};
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});
doc.save('how-to-reliably-turn-html-into-a-pdf.pdf');

请找到以下工作示例：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
  <script>
    window.onload = function() {
      var doc = new jsPDF()

      var specialElementHandlers = {
        '#editor': function(element, renderer) {
          return true;
        },
        '.controls': function(element, renderer) {
          return true;
        }
      };

      // All units are in the set measurement for the document
      // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
      doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
      });

      doc.save('how-to-reliably-turn-html-into-a-pdf.pdf');

    };
  </script>
</head>

<body>
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

如何可靠地将HTML转换为PDF

1 个答案: