Convert PDF to Image in Angular 11 with Electro4u

How to Convert PDF to Image in Angular 11

Angular 11 comes with a powerful set of tools that you can use to convert PDF to Image easily. In this article, we will show you how to do it. We will be using the PDF-js library in this tutorial.

Steps to Convert PDF to Image in Angular 11

1. The first step is to install pdf-js library. You can do that by running the following command on the terminal: npm install --save @angular/pdf-js
2. Once the library is installed, import it to your component where you want to convert from PDF to Image. import * as pdfjsLib from "@angular/pdf-js";
3. The next step is to create a new instance of the PDFJS pdf object. To do this, pass the URL of the PDF you want to convert into the pdfjsLib.getDocument() function. const pdf = await pdfjsLib.getDocument({ url: 'http://example.com/some-pdf.pdf' }).promise;
4. Once the pdf is loaded, you can use the getPage() function to extract any page of the document as an image. Pass in the page number you want to get as an argument to the getPage() function. const pageNum = 1; const page = await pdf.getPage(pageNum);
5. Finally, you can render the page as an image by calling the render() function. const scale = 1.5; const viewport = page.getViewport({ scale: scale }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = viewport.width; canvas.height = viewport.height; const renderContext = { canvasContext: context, viewport: viewport }; await page.render(renderContext);

And that's it! You have successfully converted a PDF to an image in Angular 11 using the PDFJS library.