PDFJS in ionic2

Question

ionic2プロジェクトにpdfjを追加する方法を説明できるので、インポートして使用することができます。

私はpdfjsを使用する方法を知っているが、私はionic2のプロジェクトで、私はionic2でpdfjsを統合し、その後

Answer 1

手順を、それをインポートする方法をどのような方法を見つけることが可能ではないのです。

1 . I created a lib folder inside app folder of ionic2 project and 
copied all the pdfjs library files such as js, image, css and html 
file inside lib folder. 

2. Wrote a gulp task to add these files into the www > build folder. 

これらの手順は、pdfjsをionic2プロジェクトに追加します。

手順PDF

<div id="frameContainer" class="pdfViewerContainer" *ngIf="isPdf"> 
    <iframe id="pdfViewer" src="build/viewer.html" class="pdfViewerFrame" allowfullscreen> </iframe> 
    </div> 

CSSを表示するためのtypescriptです

openPdf(): void { 

     var _self = this; 

     setTimeout(() => { 

      this.pdfjsframe = document.getElementById('pdfViewer'); 

      if (this.pdfjsframe != null) { 
       this.pdfjsframe.onload = function() { 
        _self.loadPdfDocument(); 
       }; 
      } 

     }, 0); 
    } 

    loadPdfDocument() { 
     var pdfData = this.base64ToUint8Array(this.fileBase64); 
     this.pdfjsframe.contentWindow.PDFViewerApplication.open(pdfData); 
    } 

    base64ToUint8Array(base64) { 
     var raw = atob(base64); 
     var uint8Array = new Uint8Array(raw.length); 
     for (var i = 0; i < raw.length; i++) { 
      uint8Array[i] = raw.charCodeAt(i); 
     } 
     return uint8Array; 
    } 

のHTML内で使用する

.pdfViewerContainer 
{ 
    position: fixed; 
    height: 100%; 
    left: 0px; 
    bottom: 0px !important; 
    right: 0px; 
    z-index: 1; 
} 

.pdfViewerFrame 
{ 
    width:100%; 
    height: 93.5%; 
} 

.viewerNavbar 
{ 
    position: relative; z-index: 2; 
} 

私は保存 - ：私は私は1つのプロジェクトでpdfjsを使用して、これは私がやったことで、入力パラメータとして

Answer 2

をバイト配列を期待するviewer.js openメソッドの変更を行いました：のCSSはいくつかの改善

注意が必要ですpdfjs.jsを自分のassetsフォルダに追加します。 - 私はSRC/index.htmlを

<script src="assets/js/jspdf.debug.js"></script> 

からそれをインポートする - 私は私のコードは宣言でそれを使用します。私の場合、私はそれを注入する私のアプリの任意の部分で再利用するためにサービス/プロバイダでそれを使用しています。あなたは問題なく使用することができた後

declare let jsPDF; 

：あなたが今までそれを

var doc = new jsPDF(); 
doc.setFontStyle('bold'); 
doc.text(20, 20, "Parte de Trabajo Número " + serieId); 
doc.text(20, 30, "Cliente: " + parte.nombre); 
doc.text(20, 40, "Fecha: " + parte.fechaformato); 
doc.text(20, 50, "Horas: " + parte.horainiformato + ' a ' + parte.horafinformato);