angular - ionic2中的PDFJS

Question

任何人都可以解释如何在 ionic2 项目中添加 pdfjs，以便我们可以导入和使用它。谢谢。

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

Answer 1

我遵循的步骤将 pdfjs 集成到 ionic2 中。

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

用于显示 PDF 的 HTML

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