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>

35
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,20 +45,19 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED, cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA, 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 pdfDocument = await loadingTask.promise;
const pdfPageView = new pdfjsViewer.PDFPageView({ // Document loaded, retrieving the page.
container, const pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW);
id: PAGE_TO_VIEW,
scale: SCALE, // Creating the page view with default parameters.
defaultViewport: pdfPage.getViewport({ scale: SCALE }), const pdfPageView = new pdfjsViewer.PDFPageView({
eventBus, container,
}); id: PAGE_TO_VIEW,
// Associate the actual page with the view, and draw it. scale: SCALE,
pdfPageView.setPdfPage(pdfPage); defaultViewport: pdfPage.getViewport({ scale: SCALE }),
return pdfPageView.draw(); eventBus,
})(); });
// Associate the actual page with the view, and draw it.
pdfPageView.setPdfPage(pdfPage);
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>

22
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;
// 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);

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>

21
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) {
// 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);

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);

68
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,48 +23,46 @@
// 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 //
// const page = await pdf.getPage(1);
const page = await pdf.getPage(1); const scale = 1.5;
const scale = 1.5; const viewport = page.getViewport({ scale });
const viewport = page.getViewport({ scale }); // Support HiDPI-screens.
// Support HiDPI-screens. const outputScale = window.devicePixelRatio || 1;
const outputScale = window.devicePixelRatio || 1;
// //
// Prepare canvas using PDF page dimensions // Prepare canvas using PDF page dimensions
// //
const canvas = document.getElementById("the-canvas"); const canvas = document.getElementById("the-canvas");
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
canvas.width = Math.floor(viewport.width * outputScale); canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale); canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px"; canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px"; canvas.style.height = Math.floor(viewport.height) + "px";
const transform = outputScale !== 1 const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0] ? [outputScale, 0, 0, outputScale, 0, 0]
: null; : null;
// //
// Render PDF page into canvas context // Render PDF page into canvas context
// //
const renderContext = { const renderContext = {
canvasContext: context, canvasContext: context,
transform, transform,
viewport, viewport,
}; };
page.render(renderContext); page.render(renderContext);
})();
</script> </script>
<hr> <hr>

56
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,41 +35,39 @@
// 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); var scale = 1.5;
var scale = 1.5; var viewport = page.getViewport({ scale: scale, });
var viewport = page.getViewport({ scale: scale, }); // Support HiDPI-screens.
// Support HiDPI-screens. var outputScale = window.devicePixelRatio || 1;
var outputScale = window.devicePixelRatio || 1;
// Prepare canvas using PDF page dimensions. // Prepare canvas using PDF page dimensions.
var canvas = document.getElementById('the-canvas'); var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale); canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale); canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px"; canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px"; canvas.style.height = Math.floor(viewport.height) + "px";
var transform = outputScale !== 1 var transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0] ? [outputScale, 0, 0, outputScale, 0, 0]
: null; : null;
// Render PDF page into canvas context. // Render PDF page into canvas context.
var renderContext = { var renderContext = {
canvasContext: context, canvasContext: context,
transform, transform,
viewport, viewport,
}; };
page.render(renderContext); page.render(renderContext);
})();
</script> </script>
<hr> <hr>

16
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;

95
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,39 +72,35 @@ 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."); // Get the first page.
// Get the first page. const page = await pdfDocument.getPage(1);
const page = await pdfDocument.getPage(1); // Render the page on a Node canvas with 100% scale.
// Render the page on a Node canvas with 100% scale. const viewport = page.getViewport({ scale: 1.0 });
const viewport = page.getViewport({ scale: 1.0 }); const canvasAndContext = canvasFactory.create(
const canvasAndContext = canvasFactory.create( viewport.width,
viewport.width, viewport.height
viewport.height );
); const renderContext = {
const renderContext = { canvasContext: canvasAndContext.context,
canvasContext: canvasAndContext.context, viewport,
viewport, };
};
const renderTask = page.render(renderContext); const renderTask = page.render(renderContext);
await renderTask.promise; await renderTask.promise;
// Convert the canvas to an image buffer. // Convert the canvas to an image buffer.
const image = canvasAndContext.canvas.toBuffer(); const image = canvasAndContext.canvas.toBuffer();
fs.writeFile("output.png", image, function (error) { fs.writeFile("output.png", image, function (error) {
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.
}); page.cleanup();
// Release page resources. } catch (reason) {
page.cleanup(); console.log(reason);
} catch (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)