From acf25b4bc5bb49c875537fd64c6445657b8c5978 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sun, 1 Oct 2023 16:08:59 +0200 Subject: [PATCH] Update the `examples/`-folder to account for outputting of JavaScript modules *Please note:* These changes probably need to land *just after* the first release that introduces JavaScript modules, such that the examples aren't broken in the meantime. This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code. --- examples/components/pageviewer.html | 6 +- .../{pageviewer.js => pageviewer.mjs} | 35 ++++--- examples/components/simpleviewer.html | 6 +- .../{simpleviewer.js => simpleviewer.mjs} | 24 ++--- examples/components/singlepageviewer.html | 6 +- ...nglepageviewer.js => singlepageviewer.mjs} | 23 ++--- examples/image_decoders/jpeg_viewer.html | 4 +- examples/image_decoders/jpeg_viewer.js | 63 ------------- examples/image_decoders/jpeg_viewer.mjs | 59 ++++++++++++ examples/learning/helloworld.html | 68 +++++++------- examples/learning/helloworld64.html | 56 ++++++----- examples/learning/prevnext.html | 16 ++-- examples/mobile-viewer/viewer.html | 6 +- .../mobile-viewer/{viewer.js => viewer.mjs} | 4 +- examples/node/{getinfo.js => getinfo.mjs} | 4 +- .../node/pdf2png/{pdf2png.js => pdf2png.mjs} | 94 +++++++++---------- examples/text-only/index.html | 4 +- .../text-only/{pdf2svg.js => pdf2svg.mjs} | 2 +- 18 files changed, 230 insertions(+), 250 deletions(-) rename examples/components/{pageviewer.js => pageviewer.mjs} (69%) rename examples/components/{simpleviewer.js => simpleviewer.mjs} (85%) rename examples/components/{singlepageviewer.js => singlepageviewer.mjs} (83%) delete mode 100644 examples/image_decoders/jpeg_viewer.js create mode 100644 examples/image_decoders/jpeg_viewer.mjs rename examples/mobile-viewer/{viewer.js => viewer.mjs} (99%) rename examples/node/{getinfo.js => getinfo.mjs} (95%) rename examples/node/pdf2png/{pdf2png.js => pdf2png.mjs} (56%) rename examples/text-only/{pdf2svg.js => pdf2svg.mjs} (97%) diff --git a/examples/components/pageviewer.html b/examples/components/pageviewer.html index 1dd107952ca3b7..267f8cc2915121 100644 --- a/examples/components/pageviewer.html +++ b/examples/components/pageviewer.html @@ -31,13 +31,13 @@ - - + +
- + diff --git a/examples/components/pageviewer.js b/examples/components/pageviewer.mjs similarity index 69% rename from examples/components/pageviewer.js rename to examples/components/pageviewer.mjs index b8caf439a52efe..7be73dade6b57e 100644 --- a/examples/components/pageviewer.js +++ b/examples/components/pageviewer.mjs @@ -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,20 +45,19 @@ 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); - // Creating the page view with default parameters. - const pdfPageView = new pdfjsViewer.PDFPageView({ - container, - id: PAGE_TO_VIEW, - scale: SCALE, - defaultViewport: pdfPage.getViewport({ scale: SCALE }), - eventBus, - }); - // Associate the actual page with the view, and draw it. - pdfPageView.setPdfPage(pdfPage); - return pdfPageView.draw(); -})(); +const pdfDocument = await loadingTask.promise; +// Document loaded, retrieving the page. +const pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW); + +// Creating the page view with default parameters. +const pdfPageView = new pdfjsViewer.PDFPageView({ + container, + id: PAGE_TO_VIEW, + scale: SCALE, + defaultViewport: pdfPage.getViewport({ scale: SCALE }), + eventBus, +}); +// Associate the actual page with the view, and draw it. +pdfPageView.setPdfPage(pdfPage); +pdfPageView.draw(); diff --git a/examples/components/simpleviewer.html b/examples/components/simpleviewer.html index 1119fd63046adf..e6493263dc8e3e 100644 --- a/examples/components/simpleviewer.html +++ b/examples/components/simpleviewer.html @@ -37,8 +37,8 @@ - - + + @@ -46,6 +46,6 @@
- + diff --git a/examples/components/simpleviewer.js b/examples/components/simpleviewer.mjs similarity index 85% rename from examples/components/simpleviewer.js rename to examples/components/simpleviewer.mjs index 99584f032abfd7..88044e73311760 100644 --- a/examples/components/simpleviewer.js +++ b/examples/components/simpleviewer.mjs @@ -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); -})(); + +const pdfDocument = await loadingTask.promise; +// Document loaded, specifying document for the viewer and +// the (optional) linkService. +pdfViewer.setDocument(pdfDocument); + +pdfLinkService.setDocument(pdfDocument, null); diff --git a/examples/components/singlepageviewer.html b/examples/components/singlepageviewer.html index 2be6c8b3cf004e..3636dbe77f96e7 100644 --- a/examples/components/singlepageviewer.html +++ b/examples/components/singlepageviewer.html @@ -37,8 +37,8 @@ - - + + @@ -46,6 +46,6 @@
- + diff --git a/examples/components/singlepageviewer.js b/examples/components/singlepageviewer.mjs similarity index 83% rename from examples/components/singlepageviewer.js rename to examples/components/singlepageviewer.mjs index 13076dad127649..35dd75290ed21f 100644 --- a/examples/components/singlepageviewer.js +++ b/examples/components/singlepageviewer.mjs @@ -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,21 +21,24 @@ 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. // const CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/"; const CMAP_PACKED = true; -const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf"; +const DEFAULT_URL = "../../test/pdfs/160F-2019.pdf"; // "../../web/compressed.tracemonkey-pldi-09.pdf"; // To test the AcroForm and/or scripting functionality, try e.g. this file: // "../../test/pdfs/160F-2019.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) { - // Document loaded, specifying document for the viewer and - // the (optional) linkService. - pdfSinglePageViewer.setDocument(pdfDocument); - pdfLinkService.setDocument(pdfDocument, null); -}); +const pdfDocument = await loadingTask.promise; +// Document loaded, specifying document for the viewer and +// the (optional) linkService. +pdfSinglePageViewer.setDocument(pdfDocument); + +pdfLinkService.setDocument(pdfDocument, null); diff --git a/examples/image_decoders/jpeg_viewer.html b/examples/image_decoders/jpeg_viewer.html index 47af71b0de5091..87f757bd6f20c0 100644 --- a/examples/image_decoders/jpeg_viewer.html +++ b/examples/image_decoders/jpeg_viewer.html @@ -29,12 +29,12 @@ } - + - + diff --git a/examples/image_decoders/jpeg_viewer.js b/examples/image_decoders/jpeg_viewer.js deleted file mode 100644 index e5f3394cd659f0..00000000000000 --- a/examples/image_decoders/jpeg_viewer.js +++ /dev/null @@ -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 . - // - 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); -})(); diff --git a/examples/image_decoders/jpeg_viewer.mjs b/examples/image_decoders/jpeg_viewer.mjs new file mode 100644 index 00000000000000..9aba66cc113bfb --- /dev/null +++ b/examples/image_decoders/jpeg_viewer.mjs @@ -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 . +// +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); diff --git a/examples/learning/helloworld.html b/examples/learning/helloworld.html index 7a3a71d9bcd964..6a74298f802e56 100644 --- a/examples/learning/helloworld.html +++ b/examples/learning/helloworld.html @@ -10,9 +10,9 @@

'Hello, world!' example

- + -
diff --git a/examples/learning/helloworld64.html b/examples/learning/helloworld64.html index 3abf5b538c7ab3..ed98e189f4898c 100644 --- a/examples/learning/helloworld64.html +++ b/examples/learning/helloworld64.html @@ -10,9 +10,9 @@

'Hello, world!' example

- + -
diff --git a/examples/learning/prevnext.html b/examples/learning/prevnext.html index c1cb0240f98a4a..40c1488c8b99d2 100644 --- a/examples/learning/prevnext.html +++ b/examples/learning/prevnext.html @@ -19,9 +19,9 @@

'Previous/Next' example

- + - diff --git a/examples/mobile-viewer/viewer.html b/examples/mobile-viewer/viewer.html index db8c5034c9da1a..ecec3690c135ae 100644 --- a/examples/mobile-viewer/viewer.html +++ b/examples/mobile-viewer/viewer.html @@ -24,8 +24,8 @@ - - + + @@ -71,6 +71,6 @@

- + diff --git a/examples/mobile-viewer/viewer.js b/examples/mobile-viewer/viewer.mjs similarity index 99% rename from examples/mobile-viewer/viewer.js rename to examples/mobile-viewer/viewer.mjs index 022320f5a41bcf..5a03620120a8d0 100644 --- a/examples/mobile-viewer/viewer.js +++ b/examples/mobile-viewer/viewer.mjs @@ -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; diff --git a/examples/node/getinfo.js b/examples/node/getinfo.mjs similarity index 95% rename from examples/node/getinfo.js rename to examples/node/getinfo.mjs index bf3c980fff6dbd..9847ebe526db9d 100644 --- a/examples/node/getinfo.js +++ b/examples/node/getinfo.mjs @@ -6,7 +6,7 @@ // // 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 = @@ -14,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; diff --git a/examples/node/pdf2png/pdf2png.js b/examples/node/pdf2png/pdf2png.mjs similarity index 56% rename from examples/node/pdf2png/pdf2png.js rename to examples/node/pdf2png/pdf2png.mjs index f0d0608ed29a39..3dfd9b089aa405 100644 --- a/examples/node/pdf2png/pdf2png.js +++ b/examples/node/pdf2png/pdf2png.mjs @@ -13,13 +13,13 @@ * limitations under the License. */ -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"); @@ -27,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 @@ -45,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/"; @@ -66,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, @@ -74,39 +72,35 @@ const loadingTask = pdfjsLib.getDocument({ canvasFactory, }); -(async function () { - try { - const pdfDocument = await loadingTask.promise; - console.log("# PDF document loaded."); - // Get the first page. - const page = await pdfDocument.getPage(1); - // Render the page on a Node canvas with 100% scale. - const viewport = page.getViewport({ scale: 1.0 }); - const canvasAndContext = canvasFactory.create( - viewport.width, - viewport.height - ); - const renderContext = { - canvasContext: canvasAndContext.context, - viewport, - }; +try { + const pdfDocument = await loadingTask.promise; + console.log("# PDF document loaded."); + // Get the first page. + const page = await pdfDocument.getPage(1); + // Render the page on a Node canvas with 100% scale. + const viewport = page.getViewport({ scale: 1.0 }); + const canvasAndContext = canvasFactory.create( + viewport.width, + viewport.height + ); + const renderContext = { + canvasContext: canvasAndContext.context, + viewport, + }; - const renderTask = page.render(renderContext); - await renderTask.promise; - // Convert the canvas to an image buffer. - const image = canvasAndContext.canvas.toBuffer(); - fs.writeFile("output.png", image, function (error) { - if (error) { - console.error("Error: " + error); - } else { - console.log( - "Finished converting first page of PDF file to a PNG image." - ); - } - }); - // Release page resources. - page.cleanup(); - } catch (reason) { - console.log(reason); - } -})(); + const renderTask = page.render(renderContext); + await renderTask.promise; + // Convert the canvas to an image buffer. + const image = canvasAndContext.canvas.toBuffer(); + fs.writeFile("output.png", image, function (error) { + if (error) { + console.error("Error: " + error); + } else { + console.log("Finished converting first page of PDF file to a PNG image."); + } + }); + // Release page resources. + page.cleanup(); +} catch (reason) { + console.log(reason); +} diff --git a/examples/text-only/index.html b/examples/text-only/index.html index 2717dcb0773a8b..2acbd553ea9124 100644 --- a/examples/text-only/index.html +++ b/examples/text-only/index.html @@ -3,8 +3,8 @@ Text-only PDF.js example - - + +

Text-only PDF.js example

diff --git a/examples/text-only/pdf2svg.js b/examples/text-only/pdf2svg.mjs similarity index 97% rename from examples/text-only/pdf2svg.js rename to examples/text-only/pdf2svg.mjs index e7242f4af4cec0..f5184924d67bd0 100644 --- a/examples/text-only/pdf2svg.js +++ b/examples/text-only/pdf2svg.mjs @@ -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)