# Editing PDF pages We can use the [preprocessImageFile](../../api/image-editor/exports/#preprocessimagefile) property on the [createDefaultImageReader](../../api/image-editor/exports/#createdefaultimagereader) function to load a PDFs page for editing. Using a third-party library called [PDF.js](https://mozilla.github.io/pdf.js/) we can add PDF loading support to the editor. We need to import `pdfjsLib` and the PDF.js worker script. ```html ``` Let's move on to setting up our `preprocessImageFile` function. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-1) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-1) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-1) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-1) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-1) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-1) * [index.html](#index-html-panel-1) ```html

``` * [App.jsx](#App-jsx-panel-1) * [App.css](#App-css-panel-1) ```jsx import '@pqina/pintura/pintura.css'; import './App.css'; import { useState } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura'; const editorDefaults = getEditorDefaults({ imageReader: { preprocessImageFile: async (file, options, onprogress) => { // If is not a pdf we return the origina lfile if (!/pdf$/.test(file.type)) return file; // let's convert the pdf to a png const pdf = await pdfjsLib.getDocument(URL.createObjectURL(file)) .promise; // get first page const page = await pdf.getPage(1); // get a scaled viewport for the pdf const viewport = page.getViewport({ scale: 1 }); // create the target canvas to draw on const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; // ask pdfjs to draw to the canvas await page.render({ canvasContext: canvas.getContext('2d'), transform: null, viewport: viewport, }).promise; // we turn the canvas into a blob const blob = await new Promise((resolve) => canvas.toBlob(resolve)); // Pintura Image Editor expects a File return blobToFile(blob, file.name); }, }, }); function App() { const [editorResult, setEditorResult] = useState(undefined); const handleEditorProcess = (imageState) => { setEditorResult(URL.createObjectURL(imageState.dest)); }; return (

{editorResult &&

}

); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-1) ```html ``` * [App.svelte](#App-svelte-panel-1) ```svelte

{#if editorResult}

{/if}

``` * [app.component.ts](#app-component-ts-panel-1) * [app.component.html](#app-component-html-panel-1) * [app.component.css](#app-component-css-panel-1) * [app.module.ts](#app-module-ts-panel-1) ```javascript import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { constructor(private domSanitizer: DomSanitizer) {} editorResult?: string = undefined; editorDefaults: any = getEditorDefaults({ imageReader: { preprocessImageFile: async (file, options, onprogress) => { // If is not a pdf we return the origina lfile if (!/pdf$/.test(file.type)) return file; // let's convert the pdf to a png const pdf = await pdfjsLib.getDocument( ( this.domSanitizer.bypassSecurityTrustResourceUrl( URL.createObjectURL(file) ) ) ).promise; // get first page const page = await pdf.getPage(1); // get a scaled viewport for the pdf const viewport = page.getViewport({ scale: 1 }); // create the target canvas to draw on const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; // ask pdfjs to draw to the canvas await page.render({ canvasContext: canvas.getContext('2d'), transform: null, viewport: viewport, }).promise; // we turn the canvas into a blob const blob = await new Promise((resolve) => canvas.toBlob(resolve) ); // Pintura Image Editor expects a File return blobToFile(blob, file.name); }, }, }); handleEditorProcess(imageState: any): void { this.editorResult = ( this.domSanitizer.bypassSecurityTrustResourceUrl( URL.createObjectURL(imageState.dest) ) ); } } ``` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularPinturaModule } from '@pqina/angular-pintura'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AngularPinturaModule], exports: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` * [index.html](#index-html-panel-1) ```html

```