Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to import PDFjs-dist in angular project in order to know to view-port of the pdf file

Tags:

angular

pdf.js

I would like to use pdfjs-dist package in angular project. How to import it angular project

I installed it using

npm install --save pdfjs-dist

But don't know how to import into a particular component and work with it

like image 943
Jakka rohith Avatar asked Nov 06 '19 10:11

Jakka rohith


People also ask

What is PDF worker JS?

PDF. js is an open-source JavaScript PDF viewer that renders PDF using web standards-compliant HTML5. Primarily seen in Mozilla Firefox's as the built-in PDF viewer, PDF. js also serves as an easy way for developers and integrators to embed PDF viewing capabilities in a web app or server.

What is a Workersrc?

Worker-src is a Content Security Policy (CSP) Level 3 directive that was introduced to specify valid sources for worker scripts (worker, shared worker and service worker) Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application.


Video Answer


1 Answers

After installing it, in package.json something look like this

 "dependencies": {
    ...
    "pdfjs-dist": "^2.2.228",
    ...
    }

1) Now in component you could be able to import it like

import * as pdfjsLib from 'pdfjs-dist';

2) Now you could use it like bellow example

yourMethodName() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
    const loadingTask = pdfjsLib.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf');
    loadingTask.promise.then(function(pdf) {
    console.log(pdf);
    });
}
like image 143
coder Avatar answered Sep 18 '22 15:09

coder