A guide to implementing PDF.js within an Angular 2/4/5 application

Question

A guide to implementing PDF.js within an Angular 2/4/5 application

I am currently working on creating a PDfViewer Application using Mozilla's PDF.js (see example here). I would greatly appreciate it if anyone knows of a Github project that I could use as reference.

Thank you in advance!

javascript angular typescript mozilla pdf.js

Answer 1

Answer №1

Using PDF.js with typings in Angular 10

If you find yourself needing to work with PDF.js directly within Angular 10, without the need to create a separate component, ng2-pdf-viewer could be a useful solution.

Below are the steps to make this work seamlessly in Angular 10:

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

Importing and Usage Instructions. Make sure to set

GlobalWorkerOptions.workerSrc = pdfWorkerSrc;

:

import { getDocument, GlobalWorkerOptions, PDFDocumentProxy, PDFRenderParams, version, ViewportParameters } from 'pdfjs-dist';

export class MyPdfService {
  private document: Document;

  constructor(@Inject(DOCUMENT) document) {
    this.document = document;
    const pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.js`;
    GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
  }

  // Example use case showcasing strongly typed usage.
  public async convertPdfToImageDataURLAsync(pdfFile: File): Promise<string> {
    const arrayBuffer = await new Response(pdfFile).arrayBuffer();
    const canvas = this.document.createElement('canvas'),
      ctx = canvas.getContext('2d') as CanvasRenderingContext2D,
      data = arrayBuffer;

    const pdf: PDFDocumentProxy = await getDocument(data).promise;
    const page = await pdf.getPage(1);

    const viewPortParams: ViewportParameters = { scale: 2 };
    const viewport = page.getViewport(viewPortParams);

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext: PDFRenderParams = {
      canvasContext: ctx,
      viewport: viewport
    };

    const renderedPage = await page.render(renderContext).promise;
    const imageDataURL = canvas.toDataURL();
    if (pdf != null) pdf.destroy();
    return imageDataURL;
  }
}

Answer 2

Using PDF.js with typings in Angular 10

If you find yourself needing to work with PDF.js directly within Angular 10, without the need to create a separate component, ng2-pdf-viewer could be a useful solution.

Below are the steps to make this work seamlessly in Angular 10:

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

Importing and Usage Instructions. Make sure to set

GlobalWorkerOptions.workerSrc = pdfWorkerSrc;

:

import { getDocument, GlobalWorkerOptions, PDFDocumentProxy, PDFRenderParams, version, ViewportParameters } from 'pdfjs-dist';

export class MyPdfService {
  private document: Document;

  constructor(@Inject(DOCUMENT) document) {
    this.document = document;
    const pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.js`;
    GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
  }

  // Example use case showcasing strongly typed usage.
  public async convertPdfToImageDataURLAsync(pdfFile: File): Promise<string> {
    const arrayBuffer = await new Response(pdfFile).arrayBuffer();
    const canvas = this.document.createElement('canvas'),
      ctx = canvas.getContext('2d') as CanvasRenderingContext2D,
      data = arrayBuffer;

    const pdf: PDFDocumentProxy = await getDocument(data).promise;
    const page = await pdf.getPage(1);

    const viewPortParams: ViewportParameters = { scale: 2 };
    const viewport = page.getViewport(viewPortParams);

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    const renderContext: PDFRenderParams = {
      canvasContext: ctx,
      viewport: viewport
    };

    const renderedPage = await page.render(renderContext).promise;
    const imageDataURL = canvas.toDataURL();
    if (pdf != null) pdf.destroy();
    return imageDataURL;
  }
}

Answer 3

Answer №2

If you're looking for an alternative to Mozilla's PDF.js, consider using the ng2-pdf-viewer npm module, which utilizes PDF.js in the background. Here's how you can get started:

Installation

npm install ng2-pdf-viewer --save

Note: If you're using Angular 4 or earlier, make sure to use version 3.0.8.

Next, import the module into your app.module.js

import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

Finally, integrate it into your component

@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;">
  </pdf-viewer>
})

For more information, check out the following GitHub URL and demo URL.

https://github.com/VadimDez/ng2-pdf-viewer

We hope this guide proves helpful to you.

Answer 4

If you're looking for an alternative to Mozilla's PDF.js, consider using the ng2-pdf-viewer npm module, which utilizes PDF.js in the background. Here's how you can get started:

Installation

npm install ng2-pdf-viewer --save

Note: If you're using Angular 4 or earlier, make sure to use version 3.0.8.

Next, import the module into your app.module.js

import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

Finally, integrate it into your component

@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;">
  </pdf-viewer>
})

For more information, check out the following GitHub URL and demo URL.

https://github.com/VadimDez/ng2-pdf-viewer

We hope this guide proves helpful to you.

Answer 5

Answer №3

For those looking to directly integrate pdfjs with Angular, here is a guide on how to do so:

Start by copying the 'web' and 'build' folders from https://github.com/mozilla/pdfjs-dist into your application's assets folder.
Obtain or create your own `Blob() object.

this.http.get(url, { responseType: ResponseContentType.Blob }).map(
(res) => {
  return new Blob([res.blob()], { type: fileType });
});

3. Generate a URL using the blob and pass it to viewer.html

// myBlob object is created from the http call response. Refer to step 2.
const fileUrl = URL.createObjectURL(myBlobObject);
let myFileName = "sample";
var viewerUrl = `assets/pdfjs/web/viewer.html?file=${encodeURIComponent(fileUrl)}&fileName=${sample}.pdf`;
window.open(viewerUrl);

If you choose to follow these steps, keep in mind that manual upgrading of pdfjs may be necessary.

Alternatively, for a simpler solution without the need for manual configurations, consider installing https://www.npmjs.com/package/ng2-pdfjs-viewer and following the provided instructions.

The implementation will be as straightforward as

<ng2-pdfjs-viewer pdfSrc="report.pdf"></ng2-pdfjs-viewer>

Answer 6

For those looking to directly integrate pdfjs with Angular, here is a guide on how to do so:

Start by copying the 'web' and 'build' folders from https://github.com/mozilla/pdfjs-dist into your application's assets folder.
Obtain or create your own `Blob() object.

this.http.get(url, { responseType: ResponseContentType.Blob }).map(
(res) => {
  return new Blob([res.blob()], { type: fileType });
});

3. Generate a URL using the blob and pass it to viewer.html

// myBlob object is created from the http call response. Refer to step 2.
const fileUrl = URL.createObjectURL(myBlobObject);
let myFileName = "sample";
var viewerUrl = `assets/pdfjs/web/viewer.html?file=${encodeURIComponent(fileUrl)}&fileName=${sample}.pdf`;
window.open(viewerUrl);

If you choose to follow these steps, keep in mind that manual upgrading of pdfjs may be necessary.

Alternatively, for a simpler solution without the need for manual configurations, consider installing https://www.npmjs.com/package/ng2-pdfjs-viewer and following the provided instructions.

The implementation will be as straightforward as

<ng2-pdfjs-viewer pdfSrc="report.pdf"></ng2-pdfjs-viewer>

A guide to implementing PDF.js within an Angular 2/4/5 application

Answer №1

Answer №2

Answer №3

Similar questions

Uncover the content of a base64 encoded string and convert it into

Enhance the functionality of Spartacus CMS component with a new extension library

Error in initializing UI-router wrapper due to circular dependency in Angular.js

React is having trouble rendering the current weather information

Rendering React component within a production build of Angular 7

Utilize TypeScript File array within the image tag in HTML with Angular 2

JavaScript: How to Build a Digital Grocery List with Browser Storage

Changing the color of the timePicker clock in material-ui: a step-by-step guide

What circumstances cause a string not to be considered a string in the context of JWT?

changing pictures with jquery

The 'canvas' module could not be located in the system.Here are the required stacks:- /var/task/index.js- /var/runtime/index.mjs

Even though the model value is set to true, the material check box remains unchecked

Encountering difficulties integrating Bootstrap with Angular CLI project

Every time I try to set up the MailChimp pop-up javascript, I encounter an Uncaught Error message saying that Bootstrap tooltips need Tether and an Uncaught ReferenceError message

Generating dynamic anchor tags in Vue.JS

Teaching you how to incorporate empty spaces and punctuation within JOI

Identify when the user ceases typing in Angular 2

The JSON response is returning an undefined value

Implementing the Tab key functionality without redirecting to the address bar

Instant urban locator