Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the examples/-folder to account for outputting of JavaScript modules (PR 17055 follow-up)

Browse Source 
This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code.
This commit is contained in:
Jonas Jenwald 2023-10-14 11:24:56 +02:00
parent 3f0b3b15de
commit 59c4041a49
18 changed files with 228 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/components/pageviewer.html
View File

@ -31,13 +31,13 @@ limitations under the License.
<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>
<body tabindex="1">
<div id="pageContainer" class="pdfViewer singlePageView"></div>
<script src="pageviewer.js"></script>
<script src="pageviewer.mjs" type="module"></script>
</body>
</html>

9
examples/components/pageviewer.js → examples/components/pageviewer.mjs
View File

@ -13,8 +13,6 @@
* limitations under the License.
*/
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// Some PDFs need external cmaps.
//
@ -47,7 +45,7 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
(async function () {
const pdfDocument = await loadingTask.promise;
// Document loaded, retrieving the page.
const pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW);
@ -62,5 +60,4 @@ const loadingTask = pdfjsLib.getDocument({
});
// Associate the actual page with the view, and draw it.
pdfPageView.setPdfPage(pdfPage);
return pdfPageView.draw();
})();
pdfPageView.draw();

6
examples/components/simpleviewer.html
View File

@ -37,8 +37,8 @@ limitations under the License.
<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>
<body tabindex="1">
@ -46,6 +46,6 @@ limitations under the License.
<div id="viewer" class="pdfViewer"></div>
</div>
<script src="simpleviewer.js"></script>
<script src="simpleviewer.mjs" type="module"></script>
</body>
</html>

12
examples/components/simpleviewer.js → examples/components/simpleviewer.mjs
View File

@ -13,8 +13,6 @@
* limitations under the License.
*/
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// Some PDFs need external cmaps.
//
@ -37,7 +35,10 @@ const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const ENABLE_XFA = true;
const SEARCH_FOR = ""; // try "Mozilla";
const SANDBOX_BUNDLE_SRC = "../../node_modules/pdfjs-dist/build/pdf.sandbox.js";
const SANDBOX_BUNDLE_SRC = new URL(
"../../node_modules/pdfjs-dist/build/pdf.sandbox.mjs",
window.location
);
const container = document.getElementById("viewerContainer");
@ -87,11 +88,10 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
(async function () {
const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfViewer.setDocument(pdfDocument);
pdfLinkService.setDocument(pdfDocument, null);
})();

6
examples/components/singlepageviewer.html
View File

@ -37,8 +37,8 @@ limitations under the License.
<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>
<body tabindex="1">
@ -46,6 +46,6 @@ limitations under the License.
<div id="viewer" class="pdfViewer"></div>
</div>
<script src="singlepageviewer.js"></script>
<script src="singlepageviewer.mjs" type="module"></script>
</body>
</html>

13
examples/components/singlepageviewer.js → examples/components/singlepageviewer.mjs
View File

@ -13,8 +13,6 @@
* limitations under the License.
*/
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// Some PDFs need external cmaps.
//
@ -37,7 +35,10 @@ const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const ENABLE_XFA = true;
const SEARCH_FOR = ""; // try "Mozilla";
const SANDBOX_BUNDLE_SRC = "../../node_modules/pdfjs-dist/build/pdf.sandbox.js";
const SANDBOX_BUNDLE_SRC = new URL(
"../../node_modules/pdfjs-dist/build/pdf.sandbox.mjs",
window.location
);
const container = document.getElementById("viewerContainer");
@ -87,10 +88,10 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
loadingTask.promise.then(function (pdfDocument) {
const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfSinglePageViewer.setDocument(pdfDocument);
pdfLinkService.setDocument(pdfDocument, null);
});

4
examples/image_decoders/jpeg_viewer.html
View File

@ -29,12 +29,12 @@ limitations under the License.
}
</style>
<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.js"></script>
<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.mjs" type="module"></script>
</head>
<body tabindex="1">
<canvas id="jpegCanvas" width="0" height="0"></canvas>
<script src="jpeg_viewer.js"></script>
<script src="jpeg_viewer.mjs" type="module"></script>
</body>
</html>

63
examples/image_decoders/jpeg_viewer.js
View File

@ -1,63 +0,0 @@
/* Copyright 2018 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
"use strict";
if (!pdfjsImageDecoders.JpegImage) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using `gulp dist-install`");
}
const JPEG_IMAGE = "fish.jpg";
const jpegCanvas = document.getElementById("jpegCanvas");
const jpegCtx = jpegCanvas.getContext("2d");
(async function () {
// Load the image data, and convert it to a Uint8Array.
//
const response = await fetch(JPEG_IMAGE);
if (!response.ok) {
throw new Error(response.statusText);
}
const typedArrayImage = new Uint8Array(await response.arrayBuffer());
// Parse the image data using `JpegImage`.
//
const jpegImage = new pdfjsImageDecoders.JpegImage();
jpegImage.parse(typedArrayImage);
const width = jpegImage.width,
height = jpegImage.height;
const jpegData = jpegImage.getData({
width,
height,
forceRGB: true,
});
// Render the JPEG image on a <canvas>.
//
const imageData = jpegCtx.createImageData(width, height);
const imageBytes = imageData.data;
for (let j = 0, k = 0, jj = width * height * 4; j < jj; ) {
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = 255;
}
jpegCanvas.width = width;
jpegCanvas.height = height;
jpegCtx.putImageData(imageData, 0, 0);
})();

59
examples/image_decoders/jpeg_viewer.mjs Normal file
View File

@ -0,0 +1,59 @@
/* Copyright 2018 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
if (!pdfjsImageDecoders.JpegImage) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using `gulp dist-install`");
}
const JPEG_IMAGE = "fish.jpg";
const jpegCanvas = document.getElementById("jpegCanvas");
const jpegCtx = jpegCanvas.getContext("2d");
// Load the image data, and convert it to a Uint8Array.
//
const response = await fetch(JPEG_IMAGE);
if (!response.ok) {
throw new Error(response.statusText);
}
const typedArrayImage = new Uint8Array(await response.arrayBuffer());
// Parse the image data using `JpegImage`.
//
const jpegImage = new pdfjsImageDecoders.JpegImage();
jpegImage.parse(typedArrayImage);
const width = jpegImage.width,
height = jpegImage.height;
const jpegData = jpegImage.getData({
width,
height,
forceRGB: true,
});
// Render the JPEG image on a <canvas>.
//
const imageData = jpegCtx.createImageData(width, height);
const imageBytes = imageData.data;
for (let j = 0, k = 0, jj = width * height * 4; j < jj; ) {
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = 255;
}
jpegCanvas.width = width;
jpegCanvas.height = height;
jpegCtx.putImageData(imageData, 0, 0);

8
examples/learning/helloworld.html
View File

@ -10,9 +10,9 @@
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script id="script">
<script id="script" type="module">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
@ -23,13 +23,12 @@
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
//
// Asynchronous download PDF
//
const loadingTask = pdfjsLib.getDocument(url);
(async () => {
const pdf = await loadingTask.promise;
//
// Fetch the first page
@ -64,7 +63,6 @@
viewport,
};
page.render(renderContext);
})();
</script>
<hr>

8
examples/learning/helloworld64.html
View File

@ -10,9 +10,9 @@
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script id="script">
<script id="script" type="module">
// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
@ -35,12 +35,11 @@
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
// Opening PDF by passing its binary data as a string. It is still preferable
// to use Uint8Array, but string or array-like structure will work too.
var loadingTask = pdfjsLib.getDocument({ data: pdfData, });
(async function() {
var pdf = await loadingTask.promise;
// Fetch the first page.
var page = await pdf.getPage(1);
@ -69,7 +68,6 @@
viewport,
};
page.render(renderContext);
})();
</script>
<hr>

10
examples/learning/prevnext.html
View File

@ -19,9 +19,9 @@
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
</div>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script id="script">
<script id="script" type="module">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
@ -34,7 +34,7 @@
// shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
var pdfDoc = null,
pageNum = 1,
@ -128,13 +128,11 @@
* Asynchronously downloads PDF.
*/
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
pdfDoc = await loadingTask.promise;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
</script>
</body>

6
examples/mobile-viewer/viewer.html
View File

@ -24,8 +24,8 @@ limitations under the License.
<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
<link rel="stylesheet" type="text/css" href="viewer.css">
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>
<body>
@ -71,6 +71,6 @@ limitations under the License.
<button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn"></button>
</footer>
<script src="viewer.js"></script>
<script src="viewer.mjs" type="module"></script>
</body>
</html>

4
examples/mobile-viewer/viewer.js → examples/mobile-viewer/viewer.mjs
View File

@ -13,8 +13,6 @@
* limitations under the License.
*/
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
@ -27,7 +25,7 @@ const CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/";
const CMAP_PACKED = true;
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const DEFAULT_SCALE_DELTA = 1.1;

6
examples/node/getinfo.js → examples/node/getinfo.mjs
View File

@ -1,14 +1,12 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint-disable import/no-commonjs */
//
// Basic node example that prints document metadata and text content.
//
// Run `gulp dist-install` to generate 'pdfjs-dist' npm package files.
const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
import { getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
// Loading file from file system into typed array
const pdfPath =
@ -16,7 +14,7 @@ const pdfPath =
// Will be using promises to load document, pages and misc data instead of
// callback.
const loadingTask = pdfjsLib.getDocument(pdfPath);
const loadingTask = getDocument(pdfPath);
loadingTask.promise
.then(function (doc) {
const numPages = doc.numPages;

35
examples/node/pdf2png/pdf2png.js → examples/node/pdf2png/pdf2png.mjs
View File

@ -12,15 +12,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* eslint-disable import/no-commonjs */
const Canvas = require("canvas");
const assert = require("assert").strict;
const fs = require("fs");
import { strict as assert } from "assert";
import Canvas from "canvas";
import fs from "fs";
import { getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
function NodeCanvasFactory() {}
NodeCanvasFactory.prototype = {
create: function NodeCanvasFactory_create(width, height) {
class NodeCanvasFactory {
create(width, height) {
assert(width > 0 && height > 0, "Invalid canvas size");
const canvas = Canvas.createCanvas(width, height);
const context = canvas.getContext("2d");
@ -28,16 +27,16 @@ NodeCanvasFactory.prototype = {
canvas,
context,
};
},
}
reset: function NodeCanvasFactory_reset(canvasAndContext, width, height) {
reset(canvasAndContext, width, height) {
assert(canvasAndContext.canvas, "Canvas is not specified");
assert(width > 0 && height > 0, "Invalid canvas size");
canvasAndContext.canvas.width = width;
canvasAndContext.canvas.height = height;
},
}
destroy: function NodeCanvasFactory_destroy(canvasAndContext) {
destroy(canvasAndContext) {
assert(canvasAndContext.canvas, "Canvas is not specified");
// Zeroing the width and height cause Firefox to release graphics
@ -46,10 +45,8 @@ NodeCanvasFactory.prototype = {
canvasAndContext.canvas.height = 0;
canvasAndContext.canvas = null;
canvasAndContext.context = null;
},
};
const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
}
}
// Some PDFs need external cmaps.
const CMAP_URL = "../../../node_modules/pdfjs-dist/cmaps/";
@ -67,7 +64,7 @@ const pdfPath =
const data = new Uint8Array(fs.readFileSync(pdfPath));
// Load the PDF file.
const loadingTask = pdfjsLib.getDocument({
const loadingTask = getDocument({
data,
cMapUrl: CMAP_URL,
cMapPacked: CMAP_PACKED,
@ -75,7 +72,6 @@ const loadingTask = pdfjsLib.getDocument({
canvasFactory,
});
(async function () {
try {
const pdfDocument = await loadingTask.promise;
console.log("# PDF document loaded.");
@ -100,9 +96,7 @@ const loadingTask = pdfjsLib.getDocument({
if (error) {
console.error("Error: " + error);
} else {
console.log(
"Finished converting first page of PDF file to a PNG image."
);
console.log("Finished converting first page of PDF file to a PNG image.");
}
});
// Release page resources.
@ -110,4 +104,3 @@ const loadingTask = pdfjsLib.getDocument({
} catch (reason) {
console.log(reason);
}
})();

4
examples/text-only/index.html
View File

@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<title>Text-only PDF.js example</title>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="pdf2svg.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="pdf2svg.mjs" type="module"></script>
</head>
<body>
<p>Text-only PDF.js example</p>

2
examples/text-only/pdf2svg.js → examples/text-only/pdf2svg.mjs
View File

@ -19,7 +19,7 @@ const PAGE_SCALE = 1.5;
const SVG_NS = "http://www.w3.org/2000/svg";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
function buildSVG(viewport, textContent) {
// Building SVG with size of the viewport (for simplicity)