PDFJS in ionic2

Question

Можно ли объяснить, как добавить pdfjs в проект ionic2, чтобы мы могли импортировать и использовать его. Спасибо.

Я знаю, как использовать 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;
    }

HTML для отображения PDF

 <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, чтобы ожидать байтовый массив в качестве входного параметра

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