angular2之pdf文件操作大全

最近的项目中需要显示pdf内容、下载pdf、甚至是前端生成pdf  

适用于angular2、4或者更高版本 

 

情景1.需要将页面的某个部分转成pdf文件并下载(即将页面的部分html内容转成pdf文件)

方案:

1.首先借助 html-to-image 将所需html内容转成图片,即

domtoimage.toJpeg(dom,params)

2.借助jspdf将图片转换成pdf,即pdf.addImage()这个方法,

然而这里有个坑!!!前端这里显示图片的单位是px,但是生成的pdf是按mm来计算的,像A4纸尺寸是210mm×297mm,所以这里需要做像素与毫米的转换 ,否则生成的pdf里的图片不清晰

转换还需要知道另一个参数:DPI(每英寸多少点),一般来说300DPI足够
一般来说 300DPI就足够了
象素数 / DPI = 英寸数
英寸数 * 25.4 = 毫米数,所以这里就需要你根据实际情况 计算出你这个图片的长宽 包括里面的字的大小 

3.将pdf下载到用户本地,即 pdf.save(name),可指定文件名

实际代码如下:

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

金沙官网线上,    import * as jsPDF from 'jspdf';

       window['jsPDF'] = jsPDF;

      let hideNode = document.getElementById(id).cloneNode(true);
      document.getElementById(id).parentElement.appendChild(hideNode);
      this.render.addClass(hideNode,'consulting-report-download');
      domtoimage.toJpeg(hideNode, {
        quality: 1.0,
        bgcolor:'#fff',
        style: {
          'opacity':'1',
          'top':'0',
          'left': '0'
        }
      })
      .then(function (dataUrl) {
        let img = new Image();
        img.src = dataUrl;
        img.onload = function() {
          let pdf = new jsPDF();
          pdf.addImage(dataUrl, 'JPEG', 14, 10, img.width/12, img.height/12 );//300DPI 1mm=12px
          pdf.save(`${name}.pdf`);
        }
      })
      .then(()=>{
          this.downReport = false;
      });

 

情景2.需要将pdf文件的内容显示在网页上

方案:

这里又分两种情况 ,

一种是后端直接给你一个pdf文件的链接,如

"http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"

然后让我们把这个文件显示在页面上

1.首先安装两个包 pdfjs-dist (1.9.0) 和 ng2-pdf-viewer (2.0.0),这两个版本亲测有效,更新版本可能会有bug,github地址如下

 

https://github.com/VadimDez/ng2-pdf-viewer 

https://github.com/mozilla/pdf.js

 

2.import { PdfViewerComponent } from 'ng2-pdf-viewer'; 将这个包 import 到相关module里,不需要import pdfjs-dist ,因为这个包是ng2-pdf-viewer需要的,我们只要install了就好

3.最后一步直接加代码

<pdf-viewer [src]="pdfSrc"
    [page]="page"
    [original-size]="true"
    style="display: block;"
    ></pdf-viewer>

src就是后端给你的链接,page就是页数,还需要配置别的可以去github看看,这个pad-viewer是按将pdf竖向顺序显示,刚好符合产品的需求,所以这里我没有深入

 

还有一种情况是 用户直接上传pdf,然后需要将用户上传的pdf的内容显示在网页上

这里就需要用到HTML5 里面的 FileReader获取pdfSrc,

然后还是用到上面的<pdf-viewer>

 let $img: any = document.querySelector('#file');

    if (typeof (FileReader) !== 'undefined') {
      let reader = new FileReader();

      reader.onload = (e: any) => {
        this.pdfSrc = e.target.result;
      };

      reader.readAsArrayBuffer($img.files[0]);
    }

 

情景3.直接下载pdf文件

方案:

1.window.open(url)

2.location.href = url

说实话,感觉有点low,如果您有更好的方案,希望可以互相交流

 

关于angular2及以上操作pdf的3种需求及解决方案,如果还有别的需求和更好的方案,欢迎交流~

本文由金沙官网线上发布于Web前端,转载请注明出处:angular2之pdf文件操作大全

您可能还会对下面的文章感兴趣: