使用javascript和angular将HTML转换成PDF的教程和例子

在这篇文章中，我们将看到使用javascript和angular将HTML转换成PDF的教程和例子。在Web应用程序中，通常我们有一个数据/图像以不同的格式呈现在网页上，如下所示:

• 动态数据被填充到表格中
• 图片被呈现在网页上
• HTML DOM元素下的任何元素，例如DIV

为了将网页上生成的HTML导出为PDF，我们必须编写代码来处理这个问题。

JsPDF开源库是一个流行的javascript框架，用于处理客户端的pdf/HTML操作。
我们将看到以下关于将HTML元素如div或表格转换为PDF文档并下载到系统中的教程

使用Javascript和JQuery

首先在脚本标签中配置jsPDF js文件。最好使用CDN软件包，它总是最新的代码，同时在脚本标签中添加JQuery。

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>  
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

pdf的Html表格示例

  
  <div id="print-container">  
         <h3>Employees List</h3>  
         <table style="width:100%">  
            <tr>  
               <th>Id</th>  
               <th>Name</th>  
               <th>Salary</th>  
            </tr>  
            <tr>  
               <td>1</td>  
               <td>John</td>  
               <td>5000</td>  
            </tr>  
            <tr>  
               <td>2</td>  
               <td>Franc</td>  
               <td>50000</td>  
            </tr>  
            <tr>  
               <td>3</td>  
               <td>Ram</td>  
               <td>4000</td>  
            </tr>  
         </table>  
      </div>  
      <button id="exportButton">Export table To PDF</button>  

表的数据在页面上被呈现。要将其转换为PDF，第一步是使用Html2Canass库将此表转换为canvas，然后使用jsPDF库将此canvas/image文件复制到pdf
转换过程的步骤
1.创建并初始化jspdf对象
2.向该文件添加图像的javascript代码，以生成pdf

   $('#exportButton').click(function() {             convertPdf();         });         var doc = new jsPDF();         function convertPdf() {             html2canvas($('#print-container')[0], {                 onrendered: function(canvas) {    var imgWidth = 208;               var pageHeight = 295;                       var imgHeight = canvas.height * imgWidth / canvas.width;                     var img = canvas.toDataURL("image/png");     var doc = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF                     doc.addImage(img, 'PNG', 0, 0,imgWidth, imgHeight);                   doc.save('test.pdf');                 }             });         }          

点击导出按钮，使用jquery调用javascript方法转换PDF。JsPDF是使用的类，语法是:jsPDF(orientation, unit, format) 参数是 : orientation- p portrait -l landscape. 这些基本上是用于在windows下打印文档。
format- pdf格式，如A4，A5
unit- 坐标点测量 - pt points, - cm centimeters 使用

正如我们看到的一个使用普通Javascript的例子。angular框架是基于typescript语言的。除了html/typescript组件代码之外，我们还必须对angular cli进行一些配置。 jsPDF提供了npm包。
首先安装jsPDF和html2canvas包
html2canvas - HTML元素转换成画布图像
jspdf - 画布图像转换成pdf文档

npm install jspdf --save  
npm install html2canvas --save  

在你的angular项目中安装这两个依赖项。
Angular cli配置

  
.angular-cli.json  
  
 "scripts": [  
               "../node_modules/html2canvas/dist/html2canvas.min.js"  
  
            ]  

如果你没有在angular cli json文件中配置这个脚本元素，我们曾经得到以下错误:ERROR TypeError: html2canvas_1.default is not a function

生成pdf单页的html代码

import * as jspdf from 'jspdf';    
import * as html2canvas from "html2canvas"  
  
// this generates single page  
convertToPdf(){  
    var data = document.getElementById('print-container');    
    html2canvas(data).then(canvas => {    
      // Few necessary setting options    
      var imgWidth = 208;     
      var pageHeight = 295;      
      var imgHeight = canvas.height * imgWidth / canvas.width;    
      var heightLeft = imgHeight;    
    
      const contentDataURL = canvas.toDataURL('image/png')    
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF    
      var position = 0;    
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)    
  
      pdf.save('report.pdf'); // Generated PDF     
          });    
  
}

生成多个pdf页面

multiple pages can be geneated with below script of code  
      heightLeft -= pageHeight;  
      while (heightLeft >= 0) {  
        position = heightLeft - imgHeight;  
        pdf.addPage();  
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);  
        heightLeft -= pageHeight;  
      }  

用于导出pdf的组件html代码

Export table To PDF  

输出html到pdf页面。

请看下面的屏幕截图，了解代码的输出情况