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