Угловой 7 PDFJS Компонент - PullRequest
Новая
       16

Угловой 7 PDFJS Компонент

0 голосов
/ 23 мая 2019

Я пытаюсь обернуть PDFJS внутри компонента Angular 7. У меня есть следующий код, но PDFJS не определена. Я создаю приложение, используя Angular / CLI. 

import { Component, OnInit, ElementRef, ViewChild, Input } from '@angular/core';
declare let PDFJS: any;

@Component({
  selector: 'app-dsgpdf',
  templateUrl: './dsgpdf.component.html',
  styleUrls: ['./dsgpdf.component.scss']
})
export class DsgpdfComponent implements OnInit {
    @ViewChild('theCanvas', { read: ElementRef }) theCanvas;


    constructor() {


    }

    ngOnInit() {
        debugger;
        //
        // If absolute URL from the remote server is provided, configure the CORS
        // header on that server.
        //
        var url = '/assets/fdcc0545-a0d7-4c30-89ef-5a908a1e2a47.pdf';
        //
        // The workerSrc property shall be specified.
        //

        let pdfWorkerSrc: string = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



        PDFJS.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
        //
        // Asynchronous download PDF
        //
        var loadingTask = PDFJS.getDocument(url);
        loadingTask.then(pdf => {
            //
            // Fetch the first page
            //
            pdf.getPage(2).then(page => {
                var scale = 1.5;
                var viewport = page.getViewport(scale);
                //
                // Prepare canvas using PDF page dimensions
                //
                var canvas = this.theCanvas.nativeElement;
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                //
                // Render PDF page into canvas context
                //
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport,
                };
                page.render(renderContext).then(() => {
                    debugger;
                });
            });
        });
  }

}

Я также пытался добавить эту строку кода: 

let PDFJS: any = require('pdfjs-dist/build/pdf');

Но он не компилируется: 

 error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.

Я явно импортирую это неправильно. Может кто-нибудь направить меня в правильном направлении.

Вторичный вопрос: я не хочу загружать работника из cdn. Какой правильный способ сделать это при использовании Angular / CLI?

Ответы [ 2 ]

1 голос
/ 30 мая 2019

Для PDFJS нет целевых угловых компонентов.Конфигурация требует дополнительных шагов и не очень прямолинейна.Если вы готовы принести дополнительный угловой пакет npm, вот несколько пакетов, которые сообщество open source создало в качестве альтернативы.

Приведенный ниже пакет поможет вам интегрировать pdfjs в ваш angular 7. Он обеспечивает базовую функциональность, не предоставляет зрителю.Возможность настройки: ng2-pdf-viewer .

 import { Component } from '@angular/core';
 @Component({
  selector: 'example-app',
  template: `
  <div>
      <label>PDF src</label>
      <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
  </div>
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
}

Также есть еще один пакет - ng2-pdfjs-viewer , который также предоставляет средство просмотра - полное раскрытие, оно создано мной.

Использованиеэто так. 

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</button>

<ng2-pdfjs-viewer #pdfViewer style="width: 800px; height: 400px"
  [pdfJsFolder]="'pdfjs'"
  [externalWindow]="true"
  [downloadFileName]="'mytestfile.pdf'"
  [download]="false">
</ng2-pdfjs-viewer>

<!-- your.component.ts-->
export class RateCardComponent implements OnInit {
  @ViewChild('pdfViewer') pdfViewer;
  ...

  private downloadFile(url: string): any {
    return this.http.get(url, { responseType: ResponseContentType.Blob }).map(
      (res) => {
        return new Blob([res.blob()], { type: "application/pdf" });
      });
  }

  public openPdf() {
    let url = "url to fetch pdf as byte array";
    // url can be local url or remote http request to an api/pdf file. 
    // E.g: let url = "assets/pdf-sample.pdf";
    // E.g: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
    // E.g: http://localhost:3000/api/GetMyPdf
    // Please note, for remote urls to work, CORS should be enabled at the server. Read: https://enable-cors.org/server.html

    this.downloadFile(url).subscribe(
      (res) => {
        this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
      }
    );
  }
0 голосов
/ 23 мая 2019

Чтобы включить pdfjs в ваш угловой проект, после установки пакета с использованием чего-то вроде npm i pdfjs-dist вам нужно будет изменить файл angular.json, чтобы поместить весь путь к файлу в раздел scripts.

, чтобы избежать жалоб на то, что не найден PDFjs (если это имя объекта), вам нужно будет добавить что-то вроде declare var PDFjs в компонент, где вы хотите его использовать

...