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"> <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/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head> </head>
<body tabindex="1"> <body tabindex="1">
<div id="pageContainer" class="pdfViewer singlePageView"></div> <div id="pageContainer" class="pdfViewer singlePageView"></div>
<script src="pageviewer.js"></script> <script src="pageviewer.mjs" type="module"></script>
</body> </body>
</html> </html>

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

@ -13,8 +13,6 @@
* limitations under the License. * limitations under the License.
*/ */
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) { if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`"); 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. // The workerSrc property shall be specified.
// //
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js"; "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// Some PDFs need external cmaps. // Some PDFs need external cmaps.
// //
@ -47,7 +45,7 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED, cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA, enableXfa: ENABLE_XFA,
}); });
(async function () {
const pdfDocument = await loadingTask.promise; const pdfDocument = await loadingTask.promise;
// Document loaded, retrieving the page. // Document loaded, retrieving the page.
const pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW); 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. // Associate the actual page with the view, and draw it.
pdfPageView.setPdfPage(pdfPage); 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"> <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/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head> </head>
<body tabindex="1"> <body tabindex="1">
@ -46,6 +46,6 @@ limitations under the License.
<div id="viewer" class="pdfViewer"></div> <div id="viewer" class="pdfViewer"></div>
</div> </div>
<script src="simpleviewer.js"></script> <script src="simpleviewer.mjs" type="module"></script>
</body> </body>
</html> </html>

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

@ -13,8 +13,6 @@
* limitations under the License. * limitations under the License.
*/ */
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) { if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`"); 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. // The workerSrc property shall be specified.
// //
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js"; "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// Some PDFs need external cmaps. // Some PDFs need external cmaps.
// //
@ -37,7 +35,10 @@ const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const ENABLE_XFA = true; const ENABLE_XFA = true;
const SEARCH_FOR = ""; // try "Mozilla"; 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"); const container = document.getElementById("viewerContainer");
@ -87,11 +88,10 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED, cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA, enableXfa: ENABLE_XFA,
}); });
(async function () {
const pdfDocument = await loadingTask.promise; const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and // Document loaded, specifying document for the viewer and
// the (optional) linkService. // the (optional) linkService.
pdfViewer.setDocument(pdfDocument); pdfViewer.setDocument(pdfDocument);
pdfLinkService.setDocument(pdfDocument, null); 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"> <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/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head> </head>
<body tabindex="1"> <body tabindex="1">
@ -46,6 +46,6 @@ limitations under the License.
<div id="viewer" class="pdfViewer"></div> <div id="viewer" class="pdfViewer"></div>
</div> </div>
<script src="singlepageviewer.js"></script> <script src="singlepageviewer.mjs" type="module"></script>
</body> </body>
</html> </html>

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

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

4
examples/image_decoders/jpeg_viewer.html
View File

@ -29,12 +29,12 @@ limitations under the License.
} }
</style> </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> </head>
<body tabindex="1"> <body tabindex="1">
<canvas id="jpegCanvas" width="0" height="0"></canvas> <canvas id="jpegCanvas" width="0" height="0"></canvas>
<script src="jpeg_viewer.js"></script> <script src="jpeg_viewer.mjs" type="module"></script>
</body> </body>
</html> </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> <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 // If absolute URL from the remote server is provided, configure the CORS
// header on that server. // header on that server.
@ -23,13 +23,12 @@
// The workerSrc property shall be specified. // The workerSrc property shall be specified.
// //
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js'; '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
// //
// Asynchronous download PDF // Asynchronous download PDF
// //
const loadingTask = pdfjsLib.getDocument(url); const loadingTask = pdfjsLib.getDocument(url);
(async () => {
const pdf = await loadingTask.promise; const pdf = await loadingTask.promise;
// //
// Fetch the first page // Fetch the first page
@ -64,7 +63,6 @@
viewport, viewport,
}; };
page.render(renderContext); page.render(renderContext);
})();
</script> </script>
<hr> <hr>

8
examples/learning/helloworld64.html
View File

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

10
examples/learning/prevnext.html
View File

@ -19,9 +19,9 @@
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas> <canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
</div> </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 // If absolute URL from the remote server is provided, configure the CORS
// header on that server. // header on that server.
@ -34,7 +34,7 @@
// shall be specified. // shall be specified.
// //
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js'; '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
var pdfDoc = null, var pdfDoc = null,
pageNum = 1, pageNum = 1,
@ -128,13 +128,11 @@
* Asynchronously downloads PDF. * Asynchronously downloads PDF.
*/ */
var loadingTask = pdfjsLib.getDocument(url); var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdfDoc_) { pdfDoc = await loadingTask.promise;
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages; document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering // Initial/first page rendering
renderPage(pageNum); renderPage(pageNum);
});
</script> </script>
</body> </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" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
<link rel="stylesheet" type="text/css" href="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/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head> </head>
<body> <body>
@ -71,6 +71,6 @@ limitations under the License.
<button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn"></button> <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn"></button>
</footer> </footer>
<script src="viewer.js"></script> <script src="viewer.mjs" type="module"></script>
</body> </body>
</html> </html>

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

@ -13,8 +13,6 @@
* limitations under the License. * limitations under the License.
*/ */
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) { if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`"); 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; const CMAP_PACKED = true;
pdfjsLib.GlobalWorkerOptions.workerSrc = 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_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const DEFAULT_SCALE_DELTA = 1.1; 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. /* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */ * http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint-disable import/no-commonjs */
// //
// Basic node example that prints document metadata and text content. // Basic node example that prints document metadata and text content.
// //
// Run `gulp dist-install` to generate 'pdfjs-dist' npm package files. // 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 // Loading file from file system into typed array
const pdfPath = const pdfPath =
@ -16,7 +14,7 @@ const pdfPath =
// Will be using promises to load document, pages and misc data instead of // Will be using promises to load document, pages and misc data instead of
// callback. // callback.
const loadingTask = pdfjsLib.getDocument(pdfPath); const loadingTask = getDocument(pdfPath);
loadingTask.promise loadingTask.promise
.then(function (doc) { .then(function (doc) {
const numPages = doc.numPages; 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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
/* eslint-disable import/no-commonjs */
const Canvas = require("canvas"); import { strict as assert } from "assert";
const assert = require("assert").strict; import Canvas from "canvas";
const fs = require("fs"); import fs from "fs";
import { getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
function NodeCanvasFactory() {} class NodeCanvasFactory {
NodeCanvasFactory.prototype = { create(width, height) {
create: function NodeCanvasFactory_create(width, height) {
assert(width > 0 && height > 0, "Invalid canvas size"); assert(width > 0 && height > 0, "Invalid canvas size");
const canvas = Canvas.createCanvas(width, height); const canvas = Canvas.createCanvas(width, height);
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
@ -28,16 +27,16 @@ NodeCanvasFactory.prototype = {
canvas, canvas,
context, context,
}; };
}, }
reset: function NodeCanvasFactory_reset(canvasAndContext, width, height) { reset(canvasAndContext, width, height) {
assert(canvasAndContext.canvas, "Canvas is not specified"); assert(canvasAndContext.canvas, "Canvas is not specified");
assert(width > 0 && height > 0, "Invalid canvas size"); assert(width > 0 && height > 0, "Invalid canvas size");
canvasAndContext.canvas.width = width; canvasAndContext.canvas.width = width;
canvasAndContext.canvas.height = height; canvasAndContext.canvas.height = height;
}, }
destroy: function NodeCanvasFactory_destroy(canvasAndContext) { destroy(canvasAndContext) {
assert(canvasAndContext.canvas, "Canvas is not specified"); assert(canvasAndContext.canvas, "Canvas is not specified");
// Zeroing the width and height cause Firefox to release graphics // Zeroing the width and height cause Firefox to release graphics
@ -46,10 +45,8 @@ NodeCanvasFactory.prototype = {
canvasAndContext.canvas.height = 0; canvasAndContext.canvas.height = 0;
canvasAndContext.canvas = null; canvasAndContext.canvas = null;
canvasAndContext.context = null; canvasAndContext.context = null;
}, }
}; }
const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
// Some PDFs need external cmaps. // Some PDFs need external cmaps.
const CMAP_URL = "../../../node_modules/pdfjs-dist/cmaps/"; const CMAP_URL = "../../../node_modules/pdfjs-dist/cmaps/";
@ -67,7 +64,7 @@ const pdfPath =
const data = new Uint8Array(fs.readFileSync(pdfPath)); const data = new Uint8Array(fs.readFileSync(pdfPath));
// Load the PDF file. // Load the PDF file.
const loadingTask = pdfjsLib.getDocument({ const loadingTask = getDocument({
data, data,
cMapUrl: CMAP_URL, cMapUrl: CMAP_URL,
cMapPacked: CMAP_PACKED, cMapPacked: CMAP_PACKED,
@ -75,7 +72,6 @@ const loadingTask = pdfjsLib.getDocument({
canvasFactory, canvasFactory,
}); });
(async function () {
try { try {
const pdfDocument = await loadingTask.promise; const pdfDocument = await loadingTask.promise;
console.log("# PDF document loaded."); console.log("# PDF document loaded.");
@ -100,9 +96,7 @@ const loadingTask = pdfjsLib.getDocument({
if (error) { if (error) {
console.error("Error: " + error); console.error("Error: " + error);
} else { } else {
console.log( console.log("Finished converting first page of PDF file to a PNG image.");
"Finished converting first page of PDF file to a PNG image."
);
} }
}); });
// Release page resources. // Release page resources.
@ -110,4 +104,3 @@ const loadingTask = pdfjsLib.getDocument({
} catch (reason) { } catch (reason) {
console.log(reason); console.log(reason);
} }
})();

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

@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Text-only PDF.js example</title> <title>Text-only PDF.js example</title>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script> <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="pdf2svg.js"></script> <script src="pdf2svg.mjs" type="module"></script>
</head> </head>
<body> <body>
<p>Text-only PDF.js example</p> <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"; const SVG_NS = "http://www.w3.org/2000/svg";
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js"; "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
function buildSVG(viewport, textContent) { function buildSVG(viewport, textContent) {
// Building SVG with size of the viewport (for simplicity) // Building SVG with size of the viewport (for simplicity)