PDF 文件渲染为 canvas 使用 angular 7,8,9

Question

Friends. I'm trying to render a PDF file as canvas in HTML file. This is my sample code . I'm getting some dependency error on this plugin pdfjs-dist .

import { Component, OnInit } from '@angular/core';    
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

    export class AppComponent implements OnInit {

    pdfurl = "https://www.pdfill.com/example/pdf_commenting_new.pdf";

      constructor() { }

      ngOnInit() {
        this.loadPDF();
      }

    loadPDF() {
        pdfjsLib.getDocument( this.pdfurl )
        .then((pdf) => {
          console.log( "pdf: ", pdf );
          pdf.getPage(1).then(function(page) {
            // you can now use *page* here
            console.log("Page: ", page);
            page.getAnnotations().then(function(pageAnns) {
              console.log( "Annotations: ", pageAnns )
            });
          });
        });
      }

    }

This is reference link . I need to same functionality implement in angular(7,8,9)

Answer 1

npm i @types/pdfjs-dist --save-dev

app.component.html

<canvas id="the-canvas"></canvas>

app.component.ts

import { Component } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
if( pdfjsLib !== undefined ){
  console.log( "set worker...");
   pdfjsLib.GlobalWorkerOptions.workerSrc = "https://npmcdn.com/pdfjs-dist@2.4.456/build/pdf.worker.js";
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  pdfurl = encodeURI("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf");

  constructor() { }

  ngOnInit() {
    this.loadPDF();
  }

  loadPDF() {
    const loadingTask = pdfjsLib.getDocument( this.pdfurl );
    loadingTask.promise.then((pdf) => {
      console.log( "pdf: ", pdf );
       console.log('PDF loaded');

  // Fetch the first page
  var pageNumber = 1;
  pdf.getPage(pageNumber).then(function(page) {
    console.log('Page loaded');

    var scale = 1.5;
    var viewport = page.getViewport({scale: scale});

    // Prepare canvas using PDF page dimensions
    var canvas: any = document.getElementById('the-canvas');
    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
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
      console.log('Page rendered');
    });
  });
    });
  }
}

package.json

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.0",
    "@angular/common": "^9.1.0",
    "@angular/compiler": "^9.1.0",
    "@angular/core": "^9.1.0",
    "@angular/forms": "^9.1.0",
    "@angular/platform-browser": "^9.1.0",
    "@angular/platform-browser-dynamic": "^9.1.0",
    "@types/pdfjs-dist": "latest",
    "@angular/router": "^9.1.0",
    "core-js": "^3.6.4",
    "pdfjs-dist": "^2.4.456",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "^0.10.3"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}