在 Angular 6 中将 HTML 转换为 PDF [英] Convert HTML to PDF in Angular 6

问题描述

我有一个组件(Angular 6)，它是几个组件的聚合.这会产生一个很长的 HTML(我使用的是 Bootstrap 4).现在我想将此 HTML 转换为 PDF.我进行了广泛的搜索，发现了许多适用于 jsPDF 的解决方案.要求是生成在 HTML 中显示的清晰布局(以便用户可以选择、复制等).但是我找到的解决方案要么尝试手动添加文本行，这在我的场景中是不可能的；或者他们将 HTML 转换(光栅化?)到图像格式.另外，我想保留 HTML 的格式、字体和样式.

I have a component (Angular 6) which is an aggregation of several components. This produces a long HTML (I am using Bootstrap 4). Now I want to convert this HTML to PDF. I have searched far and wide and found many solutions that work on jsPDF. The requirement is to produce a crisp layout as it appears in the HTML (so that users can select, copy, etc). But the solutions I found either try to add lines of text manually, which is impossible in my scenario; or they convert (rasterize?) the HTML to image format. Also, I want to preserve the formatting and fonts and styling of my HTML.

到目前为止我已经尝试过:这个和这个.

So far I have tried: this and this.

推荐答案

迄今为止我能想到的最佳解决方案.

Best possible solution I could come up with till now.

您必须从 npm 安装以下软件包

You would have to install the below packages from npm

html2canvas

jspdf

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
    // parentdiv is the html element which has to be converted to PDF
    html2canvas(document.querySelector("#parentdiv")).then(canvas => {

      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData,0,0,canvas.width, canvas.height);
      pdf.save('converteddoc.pdf');

  });

}

更新:

想出了另一个解决方案.我无法将其分解为 A4 大小的页面，但我能够制作一个 pdf 文件.

Came up with another solution. I wasn't able to break it down into A4 size pages, but I was able to make a single pdf file.

包:

dom-to-image

jspdf

import domtoimage from 'dom-to-image';
import * as jsPDF from 'jspdf';



            downloadPDF()
            {

              var node = document.getElementById('parentdiv');

              var img;
              var filename;
              var newImage;


              domtoimage.toPng(node, { bgcolor: '#fff' })

                .then(function(dataUrl) {

                  img = new Image();
                  img.src = dataUrl;
                  newImage = img.src;

                  img.onload = function(){

                  var pdfWidth = img.width;
                  var pdfHeight = img.height;

                    // FileSaver.saveAs(dataUrl, 'my-pdfimage.png'); // Save as Image

                    var doc;

                    if(pdfWidth > pdfHeight)
                    {
                      doc = new jsPDF('l', 'px', [pdfWidth , pdfHeight]);
                    }
                    else
                    {
                      doc = new jsPDF('p', 'px', [pdfWidth , pdfHeight]);
                    }


                    var width = doc.internal.pageSize.getWidth();
                    var height = doc.internal.pageSize.getHeight();


                    doc.addImage(newImage, 'PNG',  10, 10, width, height);
                    filename = 'mypdf_' + '.pdf';
                    doc.save(filename);

                  };


                })
                .catch(function(error) {

                 // Error Handling

                });



            }

这篇关于在 Angular 6 中将 HTML 转换为 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！