ionic2中的PDFJS

Question

谁能解释如何在ionic2项目中添加pdfjs，这样我们就可以导入和使用it.Thanks了。

我知道如何使用pdfjs，但无法找到在ionic2项目中导入pdfjs的任何方法。

Answer 1

我遵循的步骤是在ionic2.中集成pdfjs。

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项目中。

在类型记录中使用它的步骤

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;
    }

用于显示的

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

css

.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;
}

css需要改进

注意:我在viewer.js open方法中做了一些更改，希望字节数组作为输入参数。

Answer 2

我在一个项目中使用pdfjs，这就是我所做的：-我将pdfjs.js保存在我的资产文件夹中。-我从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);