ams 代碼 如果 angular result buffer one key logs

最近的項目中需要顯示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 和 ng2-pdf-viewer ，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種需求及解決方案，如果還有別的需求和更好的方案，歡迎交流~

angular2之pdf文件操作大全