first commit
	
		
			
	
		
	
	
		
	
		
			Some checks failed
		
		
	
	
		
			
				
	
				Types tests / Test (lts/*) (push) Has been cancelled
				
			
		
			
				
	
				Lint / Lint (lts/*) (push) Has been cancelled
				
			
		
			
				
	
				CodeQL / Analyze (javascript) (push) Has been cancelled
				
			
		
			
				
	
				CI / Test (20) (push) Has been cancelled
				
			
		
			
				
	
				CI / Test (22) (push) Has been cancelled
				
			
		
			
				
	
				CI / Test (24) (push) Has been cancelled
				
			
		
		
	
	
				
					
				
			
		
			Some checks failed
		
		
	
	Types tests / Test (lts/*) (push) Has been cancelled
				
			Lint / Lint (lts/*) (push) Has been cancelled
				
			CodeQL / Analyze (javascript) (push) Has been cancelled
				
			CI / Test (20) (push) Has been cancelled
				
			CI / Test (22) (push) Has been cancelled
				
			CI / Test (24) (push) Has been cancelled
				
			This commit is contained in:
		
							
								
								
									
										1
									
								
								examples/webpack/.gitignore
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								examples/webpack/.gitignore
									
									
									
									
										vendored
									
									
										Normal file
									
								
							@@ -0,0 +1 @@
 | 
			
		||||
node_modules/
 | 
			
		||||
							
								
								
									
										33
									
								
								examples/webpack/README.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										33
									
								
								examples/webpack/README.md
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,33 @@
 | 
			
		||||
## Overview
 | 
			
		||||
 | 
			
		||||
Example to demonstrate PDF.js library usage with Webpack.
 | 
			
		||||
 | 
			
		||||
## Getting started
 | 
			
		||||
 | 
			
		||||
Install the example dependencies and build the project:
 | 
			
		||||
 | 
			
		||||
    $ gulp dist-install
 | 
			
		||||
    $ cd examples/webpack
 | 
			
		||||
    $ npm install
 | 
			
		||||
    $ ./node_modules/webpack/bin/webpack.js
 | 
			
		||||
 | 
			
		||||
You can observe the build results by running `gulp server` and navigating to
 | 
			
		||||
http://localhost:8888/examples/webpack/index.html.
 | 
			
		||||
 | 
			
		||||
Refer to the `main.js` and `webpack.config.js` files for the source code.
 | 
			
		||||
Note that PDF.js packaging requires packaging of the main application and
 | 
			
		||||
the worker code, and the `workerSrc` path shall be set to the latter file.
 | 
			
		||||
 | 
			
		||||
### Minification
 | 
			
		||||
 | 
			
		||||
If you are configuring Webpack to output a minified build, please note that you
 | 
			
		||||
*must* configure the minifier to keep original class/function names intact;
 | 
			
		||||
otherwise the build is not guaranteed to work correctly.
 | 
			
		||||
 | 
			
		||||
## Worker loading
 | 
			
		||||
 | 
			
		||||
If you are getting the `Setting up fake worker` warning, make sure you are
 | 
			
		||||
importing `pdfjs-dist/webpack.mjs` which is the zero-configuration method for
 | 
			
		||||
Webpack users. Installing `worker-loader` is no longer necessary.
 | 
			
		||||
 | 
			
		||||
    import * as pdfjsLib from 'pdfjs-dist/webpack.mjs';
 | 
			
		||||
							
								
								
									
										11
									
								
								examples/webpack/index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								examples/webpack/index.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,11 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
<head>
 | 
			
		||||
  <meta charset="UTF-8">
 | 
			
		||||
  <title>webpack example</title>
 | 
			
		||||
  <script src="../../build/webpack/main.bundle.js"></script>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
  <canvas id="theCanvas"></canvas>
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										29
									
								
								examples/webpack/main.mjs
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										29
									
								
								examples/webpack/main.mjs
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,29 @@
 | 
			
		||||
// Any copyright is dedicated to the Public Domain.
 | 
			
		||||
// http://creativecommons.org/licenses/publicdomain/
 | 
			
		||||
 | 
			
		||||
// Hello world example for webpack.
 | 
			
		||||
 | 
			
		||||
import * as pdfjsLib from "pdfjs-dist";
 | 
			
		||||
 | 
			
		||||
const pdfPath = "../learning/helloworld.pdf";
 | 
			
		||||
 | 
			
		||||
// Setting worker path to worker bundle.
 | 
			
		||||
pdfjsLib.GlobalWorkerOptions.workerSrc =
 | 
			
		||||
  "../../build/webpack/pdf.worker.bundle.js";
 | 
			
		||||
 | 
			
		||||
// Loading a document.
 | 
			
		||||
const loadingTask = pdfjsLib.getDocument(pdfPath);
 | 
			
		||||
const pdfDocument = await loadingTask.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 });
 | 
			
		||||
const canvas = document.getElementById("theCanvas");
 | 
			
		||||
canvas.width = viewport.width;
 | 
			
		||||
canvas.height = viewport.height;
 | 
			
		||||
const ctx = canvas.getContext("2d");
 | 
			
		||||
const renderTask = pdfPage.render({
 | 
			
		||||
  canvasContext: ctx,
 | 
			
		||||
  viewport,
 | 
			
		||||
});
 | 
			
		||||
await renderTask.promise;
 | 
			
		||||
							
								
								
									
										12
									
								
								examples/webpack/package.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								examples/webpack/package.json
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
{
 | 
			
		||||
  "name": "webpack-pdf.js-example",
 | 
			
		||||
  "version": "0.2.0",
 | 
			
		||||
  "scripts": {
 | 
			
		||||
    "build": "webpack"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "webpack": "^5.89.0",
 | 
			
		||||
    "webpack-cli": "^5.1.4",
 | 
			
		||||
    "pdfjs-dist": "../../node_modules/pdfjs-dist"
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										18
									
								
								examples/webpack/webpack.config.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								examples/webpack/webpack.config.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,18 @@
 | 
			
		||||
/* eslint-disable import/no-commonjs */
 | 
			
		||||
 | 
			
		||||
const webpack = require("webpack"); // eslint-disable-line no-unused-vars
 | 
			
		||||
const path = require("path");
 | 
			
		||||
 | 
			
		||||
module.exports = {
 | 
			
		||||
  context: __dirname,
 | 
			
		||||
  entry: {
 | 
			
		||||
    main: "./main.mjs",
 | 
			
		||||
    "pdf.worker": "pdfjs-dist/build/pdf.worker.mjs",
 | 
			
		||||
  },
 | 
			
		||||
  mode: "none",
 | 
			
		||||
  output: {
 | 
			
		||||
    path: path.join(__dirname, "../../build/webpack"),
 | 
			
		||||
    publicPath: "../../build/webpack/",
 | 
			
		||||
    filename: "[name].bundle.js",
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
		Reference in New Issue
	
	Block a user