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

Merge pull request #17081 from Snuffleupagus/examples-modules

Browse Source 
Update the `examples/`-folder to account for outputting of JavaScript modules (PR 17055 follow-up)
This commit is contained in:
Jonas Jenwald 2023-10-28 22:08:45 +02:00 committed by GitHub
commit b798415147
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 279 additions and 469 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>

28
examples/mobile-viewer/viewer.css
View File

@ -240,31 +240,3 @@ canvas {
background-repeat: no-repeat; background-repeat: no-repeat;
animation: progressIndeterminate 2s linear infinite; animation: progressIndeterminate 2s linear infinite;
} }
#errorWrapper {
background: none repeat scroll 0 0 rgb(255 85 85 / 1);
color: rgb(255 255 255 / 1);
left: 0;
position: absolute;
right: 0;
top: 3.2rem;
z-index: 1000;
padding: 0.3rem;
font-size: 0.8em;
}
#errorMessageLeft {
float: left;
}
#errorMessageRight {
float: right;
}
#errorMoreInfo {
background-color: rgb(255 255 255 / 1);
color: rgb(0 0 0 / 1);
padding: 0.3rem;
margin: 0.3rem;
width: 98%;
}

25
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>
@ -42,25 +42,6 @@ limitations under the License.
<div class="glimmer"></div> <div class="glimmer"></div>
</div> </div>
<div id="errorWrapper" hidden="true">
<div id="errorMessageLeft">
<span id="errorMessage"></span>
<button id="errorShowMore">
More Information
</button>
<button id="errorShowLess">
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose">
Close
</button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden="true" readonly="readonly"></textarea>
</div>
<footer> <footer>
<button class="toolbarButton pageUp" title="Previous Page" id="previous"></button> <button class="toolbarButton pageUp" title="Previous Page" id="previous"></button>
<button class="toolbarButton pageDown" title="Next Page" id="next"></button> <button class="toolbarButton pageDown" title="Next Page" id="next"></button>
@ -71,6 +52,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>

123
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;
@ -89,41 +87,17 @@ const PDFViewerApplication = {
self.loadingBar.hide(); self.loadingBar.hide();
self.setTitleUsingMetadata(pdfDocument); self.setTitleUsingMetadata(pdfDocument);
}, },
function (exception) { function (reason) {
const message = exception && exception.message; let key = "pdfjs-loading-error";
const l10n = self.l10n; if (reason instanceof pdfjsLib.InvalidPDFException) {
let loadingErrorMessage; key = "pdfjs-invalid-file-error";
} else if (reason instanceof pdfjsLib.MissingPDFException) {
if (exception instanceof pdfjsLib.InvalidPDFException) { key = "pdfjs-missing-file-error";
// change error message also for other builds } else if (reason instanceof pdfjsLib.UnexpectedResponseException) {
loadingErrorMessage = l10n.get( key = "pdfjs-unexpected-response-error";
"pdfjs-invalid-file-error",
null,
"Invalid or corrupted PDF file."
);
} else if (exception instanceof pdfjsLib.MissingPDFException) {
// special message for missing PDFs
loadingErrorMessage = l10n.get(
"pdfjs-missing-file-error",
null,
"Missing PDF file."
);
} else if (exception instanceof pdfjsLib.UnexpectedResponseException) {
loadingErrorMessage = l10n.get(
"pdfjs-unexpected-response-error",
null,
"Unexpected server response."
);
} else {
loadingErrorMessage = l10n.get(
"pdfjs-loading-error",
null,
"An error occurred while loading the PDF."
);
} }
self.l10n.get(key).then(msg => {
loadingErrorMessage.then(function (msg) { self.error(msg, { message: reason?.message });
self.error(msg, { message });
}); });
self.loadingBar.hide(); self.loadingBar.hide();
} }
@ -136,9 +110,6 @@ const PDFViewerApplication = {
* destruction is completed. * destruction is completed.
*/ */
close() { close() {
const errorWrapper = document.getElementById("errorWrapper");
errorWrapper.hidden = true;
if (!this.pdfLoadingTask) { if (!this.pdfLoadingTask) {
return Promise.resolve(); return Promise.resolve();
} }
@ -231,83 +202,25 @@ const PDFViewerApplication = {
}, },
error: function pdfViewError(message, moreInfo) { error: function pdfViewError(message, moreInfo) {
const l10n = this.l10n;
const moreInfoText = [ const moreInfoText = [
l10n.get( `PDF.js v${pdfjsLib.version || "?"} (build: ${pdfjsLib.build || "?"})`,
"pdfjs-error-version-info",
{ version: pdfjsLib.version || "?", build: pdfjsLib.build || "?" },
"PDF.js v{ $version } (build: { $build })"
),
]; ];
if (moreInfo) { if (moreInfo) {
moreInfoText.push( moreInfoText.push(`Message: ${moreInfo.message}`);
l10n.get(
"pdfjs-error-message",
{ message: moreInfo.message },
"Message: { $message }"
)
);
if (moreInfo.stack) { if (moreInfo.stack) {
moreInfoText.push( moreInfoText.push(`Stack: ${moreInfo.stack}`);
l10n.get(
"pdfjs-error-stack",
{ stack: moreInfo.stack },
"Stack: { $stack }"
)
);
} else { } else {
if (moreInfo.filename) { if (moreInfo.filename) {
moreInfoText.push( moreInfoText.push(`File: ${moreInfo.filename}`);
l10n.get(
"pdfjs-error-file",
{ file: moreInfo.filename },
"File: { $file }"
)
);
} }
if (moreInfo.lineNumber) { if (moreInfo.lineNumber) {
moreInfoText.push( moreInfoText.push(`Line: ${moreInfo.lineNumber}`);
l10n.get(
"pdfjs-error-line",
{ line: moreInfo.lineNumber },
"Line: { $line }"
)
);
} }
} }
} }
const errorWrapper = document.getElementById("errorWrapper"); console.error(`${message}\n\n${moreInfoText.join("\n")}`);
errorWrapper.hidden = false;
const errorMessage = document.getElementById("errorMessage");
errorMessage.textContent = message;
const closeButton = document.getElementById("errorClose");
closeButton.onclick = function () {
errorWrapper.hidden = true;
};
const errorMoreInfo = document.getElementById("errorMoreInfo");
const moreInfoButton = document.getElementById("errorShowMore");
const lessInfoButton = document.getElementById("errorShowLess");
moreInfoButton.onclick = function () {
errorMoreInfo.hidden = false;
moreInfoButton.hidden = true;
lessInfoButton.hidden = false;
errorMoreInfo.style.height = errorMoreInfo.scrollHeight + "px";
};
lessInfoButton.onclick = function () {
errorMoreInfo.hidden = true;
moreInfoButton.hidden = false;
lessInfoButton.hidden = true;
};
moreInfoButton.hidden = false;
lessInfoButton.hidden = true;
Promise.all(moreInfoText).then(function (parts) {
errorMoreInfo.value = parts.join("\n");
});
}, },
progress: function pdfViewProgress(level) { progress: function pdfViewProgress(level) {

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)

2
examples/webpack/README.md
View File

@ -31,5 +31,3 @@ importing `pdfjs-dist/webpack` which is the zero-configuration method for
Webpack users. Installing `worker-loader` is no longer necessary. Webpack users. Installing `worker-loader` is no longer necessary.
import * as pdfjsLib from 'pdfjs-dist/webpack'; import * as pdfjsLib from 'pdfjs-dist/webpack';
For a full working example refer to [this repository](https://github.com/yurydelendik/pdfjs-react).

37
examples/webpack/main.js
View File

@ -1,37 +0,0 @@
// Any copyright is dedicated to the Public Domain.
// http://creativecommons.org/licenses/publicdomain/
/* eslint-disable import/no-commonjs */
// Hello world example for webpack.
const pdfjsLib = require("pdfjs-dist");
const pdfPath = "../learning/helloworld.pdf";
// Setting worker path to worker bundle.
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../build/webpack/pdf.worker.bundle.js";
// Loading a document.
const loadingTask = pdfjsLib.getDocument(pdfPath);
loadingTask.promise
.then(function (pdfDocument) {
// Request a first page
return pdfDocument.getPage(1).then(function (pdfPage) {
// Display page on the existing canvas with 100% scale.
const viewport = pdfPage.getViewport({ scale: 1.0 });
const canvas = document.getElementById("theCanvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");
const renderTask = pdfPage.render({
canvasContext: ctx,
viewport,
});
return renderTask.promise;
});
})
.catch(function (reason) {
console.error("Error: " + reason);
});

29
examples/webpack/main.mjs Normal file
View File

@ -0,0 +1,29 @@
// Any copyright is dedicated to the Public Domain.
// http://creativecommons.org/licenses/publicdomain/
// Hello world example for webpack.
import * as pdfjsLib from "pdfjs-dist";
const pdfPath = "../learning/helloworld.pdf";
// Setting worker path to worker bundle.
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../build/webpack/pdf.worker.bundle.js";
// Loading a document.
const loadingTask = pdfjsLib.getDocument(pdfPath);
const pdfDocument = await loadingTask.promise;
// Request a first page
const pdfPage = await pdfDocument.getPage(1);
// Display page on the existing canvas with 100% scale.
const viewport = pdfPage.getViewport({ scale: 1.0 });
const canvas = document.getElementById("theCanvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");
const renderTask = pdfPage.render({
canvasContext: ctx,
viewport,
});
await renderTask.promise;

6
examples/webpack/package.json
View File

@ -1,12 +1,12 @@
{ {
"name": "webpack-pdf.js-example", "name": "webpack-pdf.js-example",
"version": "0.1.0", "version": "0.2.0",
"scripts": { "scripts": {
"build": "webpack" "build": "webpack"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^5.11.1", "webpack": "^5.89.0",
"webpack-cli": "^4.3.1", "webpack-cli": "^5.1.4",
"pdfjs-dist": "../../node_modules/pdfjs-dist" "pdfjs-dist": "../../node_modules/pdfjs-dist"
} }
} }

4
examples/webpack/webpack.config.js
View File

@ -6,8 +6,8 @@ const path = require("path");
module.exports = { module.exports = {
context: __dirname, context: __dirname,
entry: { entry: {
main: "./main.js", main: "./main.mjs",
"pdf.worker": "pdfjs-dist/build/pdf.worker.entry", "pdf.worker": "pdfjs-dist/build/pdf.worker.mjs",
}, },
mode: "none", mode: "none",
output: { output: {

4
gulpfile.mjs
View File

@ -61,7 +61,6 @@ const MINIFIED_DIR = BUILD_DIR + "minified/";
const MINIFIED_LEGACY_DIR = BUILD_DIR + "minified-legacy/"; const MINIFIED_LEGACY_DIR = BUILD_DIR + "minified-legacy/";
const JSDOC_BUILD_DIR = BUILD_DIR + "jsdoc/"; const JSDOC_BUILD_DIR = BUILD_DIR + "jsdoc/";
const GH_PAGES_DIR = BUILD_DIR + "gh-pages/"; const GH_PAGES_DIR = BUILD_DIR + "gh-pages/";
const SRC_DIR = "src/";
const DIST_DIR = BUILD_DIR + "dist/"; const DIST_DIR = BUILD_DIR + "dist/";
const TYPES_DIR = BUILD_DIR + "types/"; const TYPES_DIR = BUILD_DIR + "types/";
const TMP_DIR = BUILD_DIR + "tmp/"; const TMP_DIR = BUILD_DIR + "tmp/";
@ -1829,7 +1828,6 @@ gulp.task(
.src([ .src([
GENERIC_DIR + "build/pdf.mjs", GENERIC_DIR + "build/pdf.mjs",
GENERIC_DIR + "build/pdf.worker.mjs", GENERIC_DIR + "build/pdf.worker.mjs",
SRC_DIR + "pdf.worker.entry.js",
]) ])
.pipe(gulp.dest(TYPESTEST_DIR + "build/")), .pipe(gulp.dest(TYPESTEST_DIR + "build/")),
gulp gulp
@ -2207,14 +2205,12 @@ gulp.task(
.src([ .src([
GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs", GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs",
GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map", GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map",
SRC_DIR + "pdf.worker.entry.js",
]) ])
.pipe(gulp.dest(DIST_DIR + "build/")), .pipe(gulp.dest(DIST_DIR + "build/")),
gulp gulp
.src([ .src([
GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs", GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs",
GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map", GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map",
SRC_DIR + "pdf.worker.entry.js",
]) ])
.pipe(gulp.dest(DIST_DIR + "legacy/build/")), .pipe(gulp.dest(DIST_DIR + "legacy/build/")),
gulp gulp

21
src/pdf.worker.entry.js
View File

@ -1,21 +0,0 @@
/* Copyright 2022 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.
*/
/* globals require:readonly */
/* eslint-disable import/no-commonjs */
(typeof window !== "undefined"
? window
: {}
).pdfjsWorker = require("./pdf.worker.mjs");