如何使用 Spring 和 Angular js 创建 Pdf答案

【问题标题】：How to create Pdf using Spring and Angular js如何使用 Spring 和 Angular js 创建 Pdf
【发布时间】：2018-07-10 03:13:28
【问题描述】：

我想创建一个 PDF 文件，以便当我单击按钮 SaveToPDF 时它应该满足要求。但我无法做到这一点，关于如何使用RestEndCall 通过后端使用SpringMVC 和前端使用Angular4/5/6/7/8+ 实现这一点的任何帮助@

另外，我应该将哪些数据发送到后端？准确地说，我不想逐个单元格地创建每个单元格。如果有任何其他选项可以创建看起来与网页完全相同的 PDF。

【问题讨论】：

您能否添加有关您的问题的更多信息
通过使用 pd4ml 和 itext pdf，您可以将 HTML 页面转换为 pdf 或者您可以制作自己的 pdf
您的意思是，您要将当前网页保存为 pdf 格式吗？
stackoverflow.com/questions/34049956/…
您是否考虑过使用 Google 的 Puppeteer？ developers.google.com/web/tools/puppeteer/?authuser=3&hl=vi

标签： angularjs spring-mvc pdf-generation

【解决方案1】：

您询问如何创建 PDF 格式的页面截图。

在实践中，用于制作 pdf 的客户端库受到功能的极大限制，并且产生的结果很差，

剩下的是服务器端渲染。

我很久以前用wkhtmltopdf 取得了成功，还有一些其他的选择。

您可以通过搜索 wkhtmltopdf 或 PhantomJS 替代 Java 来开始您的实施之旅。

这应该如何工作？当true 脚本（例如相同的 wkhtmltopdf）完成工作时，无头浏览器会打开一个 URL 并等待一个 window.variable。 an answer 有一个无头浏览器列表。最好的 PDF 解决方案将基于其中任何一个。

【讨论】：

这确实是最好的答案，我们目前正在使用 wkhtmltopdf，虽然它并不总是能完美地转换，但它确实是我们找到的最好的。

【解决方案2】：

您可以在前端轻松实现，无需支持请求。这是角度示例：

<html ng-app="app">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<script>
var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.data=  [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];

     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);
</script>
</head>
<body>
  <div ng-controller="listController">
    <div id="exportthis">
      download me as a pdf
    </div>
    <button ng-click="export()">export</button>
  </div>
<body>
</html>

【讨论】：