Intro
This time, I will try printing PDF files with the Electron application.
Before printing, I want to get images from the PDF file.
Environments
- electron ver.12.0.2
- typescript ver.4.2.4
- webpack ver.5.31.2
- webpack-cli ver.4.6.0
- pdfjs-dist ver.2.7.570
Use Webpack in client-side
Because I want to use Webpack in client-side as same as when I create ASP.NET Core applications, I add Webpack and bundle the client-side TypeScript code.
webpack.config.js
var path = require('path'); module.exports = { mode: 'development', entry: { 'main.page': './clients/main.page.ts', }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { filename: '[name].js', path: path.resolve(__dirname, 'js/clients'), library: 'Page', libraryTarget: 'umd' } }; And I got a script error.
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'" This error came from "Content-Security-Policy" for electron and bundled script for development use "eval()".
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> ... main.page.js
/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ ... /***/ ((__unused_webpack_module, exports) => { eval("\r\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\r\nexports.greet = void 0;\r\nfunction greet(message) {\r\n alert(message);\r\n return 'OK';\r\n}\r\nexports.greet = greet;\r\n\n\n//# sourceURL=webpack://Page/./clients/main.page.ts?"); /***/ }) /******/ }); ... I think the easiest way to resolve is change mode of Webpack to "production".
webpack.config.js
var path = require('path'); module.exports = { mode: 'production', entry: { 'main.page': './clients/main.page.ts', }, ... Get images from PDF files
To get images from PDF files, I will use PDF.js.
First, I drew the first page into a canvas.
main.ts
... async function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }); win.loadFile('./views/index.html'); const filePath = `C:/Users/example/sample600.pdf`; win.webContents.executeJavaScript(`Page.load('${filePath}')`) .catch(error => console.error(error)); } ... index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body style="background: white;"> <div> <div id="area"></div> <button id="save_button">Click</button> <div id="result"></div> </div> <script src="../js/clients/main.page.js"></script> </body> </html> main.page.ts
import * as pdf from 'pdfjs-dist'; let canvas: HTMLCanvasElement; export async function load(filePath: string) { const rootElement = document.getElementById('area') as HTMLElement; pdf.GlobalWorkerOptions.workerSrc = '../node_modules/pdfjs-dist/build/pdf.worker.js'; const pdfDocument = await pdf.getDocument(filePath).promise; // Request a first page const pdfPage = await pdfDocument.getPage(1); // Display page on the existing canvas with 100% scale. const viewport = pdfPage.getViewport({ scale: 1.0, rotation: 0 }); canvas = document.createElement('canvas'); canvas.id = 'sample_page'; canvas.width = viewport.width; canvas.height = viewport.height; const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; await pdfPage.render({ canvasContext: ctx, viewport }).promise; rootElement.appendChild(canvas); } Result
Resolution
Now I have a problem.
The created image size was { width:1190, height: 841 }.
Its DPI was 72.
How can I change to high resolution?
According to the document, I should change the scale of ViewPort.
Because I don't know the natural page size of PDF files, so I convert from pixel size of 72DPI to millimeter, after that I convert to pixel size of 300DPI.
sizeConverter.ts
export class SizeConverter { public static ConvertFromMmToPx(sizeMm: number, dpi: number): number { if(sizeMm <= 0 || dpi <= 0) { return 0; } const sizeInch = sizeMm / 25.4; return Math.round(sizeInch * dpi); } public static ConvertFromPxToMm(sizePx: number, dpi: number): number { if(sizePx <= 0 || dpi <= 0) { return 0; } const sizeInch = sizePx / dpi; return Math.round(sizeInch * 25.4); } } main.page.ts
import { SizeConverter } from './sizeConverter'; ... export async function load(filePath: string) { ... const pdfDocument = await pdf.getDocument(filePath).promise; // Request a first page const pdfPage = await pdfDocument.getPage(1); // Display page on the existing canvas with 100% scale. const viewport = pdfPage.getViewport({ scale: 1.0, rotation: 0 }); canvas = document.createElement('canvas'); canvas.id = 'sample_page'; const horizontalMm = SizeConverter.ConvertFromPxToMm(viewport.width, 72); const verticalMm = SizeConverter.ConvertFromPxToMm(viewport.height, 72); const actualWidth = SizeConverter.ConvertFromMmToPx(horizontalMm, 300); const actualHeight = SizeConverter.ConvertFromMmToPx(verticalMm, 300); canvas.width = actualWidth; canvas.height = actualHeight; canvas.style.width = `${viewport.width}px`; canvas.style.height = `${viewport.height}px`; const scale = Math.min(actualWidth / viewport.width, actualHeight / viewport.height); const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; await pdfPage.render({ canvasContext: ctx, viewport: pdfPage.getViewport({ scale: scale, rotation: 0 }), }).promise; rootElement.appendChild(canvas); } Save images
To save file silently, I send Blob data to electron-side.
Because I can't use "Blob" in electron-side, so I have to convert Blob to Buffer before sending to electron-side.
preload.ts
import { ipcRenderer } from 'electron'; window.addEventListener('DOMContentLoaded', () => { const button = document.getElementById('save_button'); if(button != null) { button.addEventListener('click', (ev) => { saveFile(); }); } }); function saveFile() { const canvas = document.getElementById('sample_page') as HTMLCanvasElement; canvas.toBlob((blob) => { const fileReader = new FileReader(); fileReader.onload = async (ev) => { const buffer = Buffer.from(fileReader.result as ArrayBuffer); ipcRenderer.send('save_file', "sample.png", buffer); }; fileReader.readAsArrayBuffer(blob!); }, 'image/png', 1); } main.ts
... import * as fs from 'fs'; ... ipcMain.on('save_file', (_, fileName, buffer) => { // get ArrayBuffer fs.writeFile(fileName, buffer, error => { if(error) { console.error(error); } else { console.log("OK"); } }); }); 
Top comments (0)