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

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

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

6
examples/components/simpleviewer.html
View File

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

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

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

6
examples/components/singlepageviewer.html
View File

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

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

@ -13,8 +13,6 @@
* limitations under the License.
*/
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// Some PDFs need external cmaps.
//
@ -37,7 +35,10 @@ const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const ENABLE_XFA = true;
const SEARCH_FOR = ""; // try "Mozilla";
const SANDBOX_BUNDLE_SRC = "../../node_modules/pdfjs-dist/build/pdf.sandbox.js";
const SANDBOX_BUNDLE_SRC = new URL(
"../../node_modules/pdfjs-dist/build/pdf.sandbox.mjs",
window.location
);
const container = document.getElementById("viewerContainer");
@ -87,10 +88,10 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
loadingTask.promise.then(function (pdfDocument) {
// 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>
<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.js"></script>
<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.mjs" type="module"></script>
</head>
<body tabindex="1">
<canvas id="jpegCanvas" width="0" height="0"></canvas>
<script src="jpeg_viewer.js"></script>
<script src="jpeg_viewer.mjs" type="module"></script>
</body>
</html>

63
examples/image_decoders/jpeg_viewer.js
View File

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

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

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

68
examples/learning/helloworld.html
View File

@ -10,9 +10,9 @@
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script id="script">
<script id="script" type="module">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
@ -23,48 +23,46 @@
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
//
// Asynchronous download PDF
//
const loadingTask = pdfjsLib.getDocument(url);
(async () => {
const pdf = await loadingTask.promise;
//
// Fetch the first page
//
const page = await pdf.getPage(1);
const scale = 1.5;
const viewport = page.getViewport({ scale });
// Support HiDPI-screens.
const outputScale = window.devicePixelRatio || 1;
const pdf = await loadingTask.promise;
//
// Fetch the first page
//
const page = await pdf.getPage(1);
const scale = 1.5;
const viewport = page.getViewport({ scale });
// Support HiDPI-screens.
const outputScale = window.devicePixelRatio || 1;
//
// Prepare canvas using PDF page dimensions
//
const canvas = document.getElementById("the-canvas");
const context = canvas.getContext("2d");
//
// Prepare canvas using PDF page dimensions
//
const canvas = document.getElementById("the-canvas");
const context = canvas.getContext("2d");
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
//
// Render PDF page into canvas context
//
const renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
})();
//
// Render PDF page into canvas context
//
const renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
</script>
<hr>

56
examples/learning/helloworld64.html
View File

@ -10,9 +10,9 @@
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script id="script">
<script id="script" type="module">
// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
@ -35,41 +35,39 @@
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'../../node_modules/pdfjs-dist/build/pdf.worker.js';
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
// Opening PDF by passing its binary data as a string. It is still preferable
// to use Uint8Array, but string or array-like structure will work too.
var loadingTask = pdfjsLib.getDocument({ data: pdfData, });
(async function() {
var pdf = await loadingTask.promise;
// Fetch the first page.
var page = await pdf.getPage(1);
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;
var pdf = await loadingTask.promise;
// Fetch the first page.
var page = await pdf.getPage(1);
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;
// Prepare canvas using PDF page dimensions.
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
// Prepare canvas using PDF page dimensions.
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
var transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
var transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
// Render PDF page into canvas context.
var renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
})();
// Render PDF page into canvas context.
var renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
</script>
<hr>

16
examples/learning/prevnext.html
View File

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

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

@ -240,31 +240,3 @@ canvas {
background-repeat: no-repeat;
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" type="text/css" href="viewer.css">
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>
<body>
@ -42,25 +42,6 @@ limitations under the License.
<div class="glimmer"></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>
<button class="toolbarButton pageUp" title="Previous Page" id="previous"></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>
</footer>
<script src="viewer.js"></script>
<script src="viewer.mjs" type="module"></script>
</body>
</html>

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

@ -13,8 +13,6 @@
* limitations under the License.
*/
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
@ -27,7 +25,7 @@ const CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/";
const CMAP_PACKED = true;
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const DEFAULT_SCALE_DELTA = 1.1;
@ -89,41 +87,17 @@ const PDFViewerApplication = {
self.loadingBar.hide();
self.setTitleUsingMetadata(pdfDocument);
},
function (exception) {
const message = exception && exception.message;
const l10n = self.l10n;
let loadingErrorMessage;
if (exception instanceof pdfjsLib.InvalidPDFException) {
// change error message also for other builds
loadingErrorMessage = l10n.get(
"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."
);
function (reason) {
let key = "pdfjs-loading-error";
if (reason instanceof pdfjsLib.InvalidPDFException) {
key = "pdfjs-invalid-file-error";
} else if (reason instanceof pdfjsLib.MissingPDFException) {
key = "pdfjs-missing-file-error";
} else if (reason instanceof pdfjsLib.UnexpectedResponseException) {
key = "pdfjs-unexpected-response-error";
}
loadingErrorMessage.then(function (msg) {
self.error(msg, { message });
self.l10n.get(key).then(msg => {
self.error(msg, { message: reason?.message });
});
self.loadingBar.hide();
}
@ -136,9 +110,6 @@ const PDFViewerApplication = {
* destruction is completed.
*/
close() {
const errorWrapper = document.getElementById("errorWrapper");
errorWrapper.hidden = true;
if (!this.pdfLoadingTask) {
return Promise.resolve();
}
@ -231,83 +202,25 @@ const PDFViewerApplication = {
},
error: function pdfViewError(message, moreInfo) {
const l10n = this.l10n;
const moreInfoText = [
l10n.get(
"pdfjs-error-version-info",
{ version: pdfjsLib.version || "?", build: pdfjsLib.build || "?" },
"PDF.js v{ $version } (build: { $build })"
),
`PDF.js v${pdfjsLib.version || "?"} (build: ${pdfjsLib.build || "?"})`,
];
if (moreInfo) {
moreInfoText.push(
l10n.get(
"pdfjs-error-message",
{ message: moreInfo.message },
"Message: { $message }"
)
);
moreInfoText.push(`Message: ${moreInfo.message}`);
if (moreInfo.stack) {
moreInfoText.push(
l10n.get(
"pdfjs-error-stack",
{ stack: moreInfo.stack },
"Stack: { $stack }"
)
);
moreInfoText.push(`Stack: ${moreInfo.stack}`);
} else {
if (moreInfo.filename) {
moreInfoText.push(
l10n.get(
"pdfjs-error-file",
{ file: moreInfo.filename },
"File: { $file }"
)
);
moreInfoText.push(`File: ${moreInfo.filename}`);
}
if (moreInfo.lineNumber) {
moreInfoText.push(
l10n.get(
"pdfjs-error-line",
{ line: moreInfo.lineNumber },
"Line: { $line }"
)
);
moreInfoText.push(`Line: ${moreInfo.lineNumber}`);
}
}
}
const errorWrapper = document.getElementById("errorWrapper");
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");
});
console.error(`${message}\n\n${moreInfoText.join("\n")}`);
},
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.
* http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint-disable import/no-commonjs */
//
// Basic node example that prints document metadata and text content.
//
// Run `gulp dist-install` to generate 'pdfjs-dist' npm package files.
const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
import { getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
// Loading file from file system into typed array
const pdfPath =
@ -16,7 +14,7 @@ const pdfPath =
// Will be using promises to load document, pages and misc data instead of
// callback.
const loadingTask = pdfjsLib.getDocument(pdfPath);
const loadingTask = getDocument(pdfPath);
loadingTask.promise
.then(function (doc) {
const numPages = doc.numPages;

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
* limitations under the License.
*/
/* eslint-disable import/no-commonjs */
const Canvas = require("canvas");
const assert = require("assert").strict;
const fs = require("fs");
import { strict as assert } from "assert";
import Canvas from "canvas";
import fs from "fs";
import { getDocument } from "pdfjs-dist/legacy/build/pdf.mjs";
function NodeCanvasFactory() {}
NodeCanvasFactory.prototype = {
create: function NodeCanvasFactory_create(width, height) {
class NodeCanvasFactory {
create(width, height) {
assert(width > 0 && height > 0, "Invalid canvas size");
const canvas = Canvas.createCanvas(width, height);
const context = canvas.getContext("2d");
@ -28,16 +27,16 @@ NodeCanvasFactory.prototype = {
canvas,
context,
};
},
}
reset: function NodeCanvasFactory_reset(canvasAndContext, width, height) {
reset(canvasAndContext, width, height) {
assert(canvasAndContext.canvas, "Canvas is not specified");
assert(width > 0 && height > 0, "Invalid canvas size");
canvasAndContext.canvas.width = width;
canvasAndContext.canvas.height = height;
},
}
destroy: function NodeCanvasFactory_destroy(canvasAndContext) {
destroy(canvasAndContext) {
assert(canvasAndContext.canvas, "Canvas is not specified");
// Zeroing the width and height cause Firefox to release graphics
@ -46,10 +45,8 @@ NodeCanvasFactory.prototype = {
canvasAndContext.canvas.height = 0;
canvasAndContext.canvas = null;
canvasAndContext.context = null;
},
};
const pdfjsLib = require("pdfjs-dist/legacy/build/pdf.js");
}
}
// Some PDFs need external cmaps.
const CMAP_URL = "../../../node_modules/pdfjs-dist/cmaps/";
@ -67,7 +64,7 @@ const pdfPath =
const data = new Uint8Array(fs.readFileSync(pdfPath));
// Load the PDF file.
const loadingTask = pdfjsLib.getDocument({
const loadingTask = getDocument({
data,
cMapUrl: CMAP_URL,
cMapPacked: CMAP_PACKED,
@ -75,39 +72,35 @@ const loadingTask = pdfjsLib.getDocument({
canvasFactory,
});
(async function () {
try {
const pdfDocument = await loadingTask.promise;
console.log("# PDF document loaded.");
// Get the first page.
const page = await pdfDocument.getPage(1);
// Render the page on a Node canvas with 100% scale.
const viewport = page.getViewport({ scale: 1.0 });
const canvasAndContext = canvasFactory.create(
viewport.width,
viewport.height
);
const renderContext = {
canvasContext: canvasAndContext.context,
viewport,
};
try {
const pdfDocument = await loadingTask.promise;
console.log("# PDF document loaded.");
// Get the first page.
const page = await pdfDocument.getPage(1);
// Render the page on a Node canvas with 100% scale.
const viewport = page.getViewport({ scale: 1.0 });
const canvasAndContext = canvasFactory.create(
viewport.width,
viewport.height
);
const renderContext = {
canvasContext: canvasAndContext.context,
viewport,
};
const renderTask = page.render(renderContext);
await renderTask.promise;
// Convert the canvas to an image buffer.
const image = canvasAndContext.canvas.toBuffer();
fs.writeFile("output.png", image, function (error) {
if (error) {
console.error("Error: " + error);
} else {
console.log(
"Finished converting first page of PDF file to a PNG image."
);
}
});
// Release page resources.
page.cleanup();
} catch (reason) {
console.log(reason);
}
})();
const renderTask = page.render(renderContext);
await renderTask.promise;
// Convert the canvas to an image buffer.
const image = canvasAndContext.canvas.toBuffer();
fs.writeFile("output.png", image, function (error) {
if (error) {
console.error("Error: " + error);
} else {
console.log("Finished converting first page of PDF file to a PNG image.");
}
});
// Release page resources.
page.cleanup();
} catch (reason) {
console.log(reason);
}

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

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

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

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

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.
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",
"version": "0.1.0",
"version": "0.2.0",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"pdfjs-dist": "../../node_modules/pdfjs-dist"
}
}

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

@ -6,8 +6,8 @@ const path = require("path");
module.exports = {
context: __dirname,
entry: {
main: "./main.js",
"pdf.worker": "pdfjs-dist/build/pdf.worker.entry",
main: "./main.mjs",
"pdf.worker": "pdfjs-dist/build/pdf.worker.mjs",
},
mode: "none",
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 JSDOC_BUILD_DIR = BUILD_DIR + "jsdoc/";
const GH_PAGES_DIR = BUILD_DIR + "gh-pages/";
const SRC_DIR = "src/";
const DIST_DIR = BUILD_DIR + "dist/";
const TYPES_DIR = BUILD_DIR + "types/";
const TMP_DIR = BUILD_DIR + "tmp/";
@ -1829,7 +1828,6 @@ gulp.task(
.src([
GENERIC_DIR + "build/pdf.mjs",
GENERIC_DIR + "build/pdf.worker.mjs",
SRC_DIR + "pdf.worker.entry.js",
])
.pipe(gulp.dest(TYPESTEST_DIR + "build/")),
gulp
@ -2207,14 +2205,12 @@ gulp.task(
.src([
GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs",
GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map",
SRC_DIR + "pdf.worker.entry.js",
])
.pipe(gulp.dest(DIST_DIR + "build/")),
gulp
.src([
GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs",
GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map",
SRC_DIR + "pdf.worker.entry.js",
])
.pipe(gulp.dest(DIST_DIR + "legacy/build/")),
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");