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

Merge pull request #20447 from calixteman/lint_html

Browse Source 
Lint and format the HTML in using Prettier
This commit is contained in:
Tim van der Meij 2025-11-18 21:11:52 +01:00 committed by GitHub
commit 8f0c62990e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 1306 additions and 948 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.prettierrc
View File

@ -9,10 +9,17 @@
"overrides": [ "overrides": [
{ {
files: ["tsconfig.json"], "files": ["tsconfig.json", ".prettierrc"],
options: { "options": {
parser: "json", "parser": "json"
}, }
}, },
{
"files": ["**/*.html"],
"options": {
"parser": "html",
"printWidth": 160
}
}
] ]
} }

42
examples/components/pageviewer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2014 Mozilla Foundation Copyright 2014 Mozilla Foundation
@ -15,29 +15,29 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<html dir="ltr" mozdisallowselectionprint> <html dir="ltr" mozdisallowselectionprint>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="google" content="notranslate"> <meta name="google" content="notranslate" />
<title>PDF.js page viewer using built components</title> <title>PDF.js page viewer using built components</title>
<style> <style>
body { body {
background-color: #808080; background-color: #808080;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
</style> </style>
<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.mjs" type="module"></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> <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.mjs" type="module"></script> <script src="pageviewer.mjs" type="module"></script>
</body> </body>
</html> </html>

58
examples/components/simpleviewer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2014 Mozilla Foundation Copyright 2014 Mozilla Foundation
@ -15,37 +15,37 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<html dir="ltr" mozdisallowselectionprint> <html dir="ltr" mozdisallowselectionprint>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="google" content="notranslate"> <meta name="google" content="notranslate" />
<title>PDF.js viewer using built components</title> <title>PDF.js viewer using built components</title>
<style> <style>
body { body {
background-color: #808080; background-color: #808080;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#viewerContainer { #viewerContainer {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<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.mjs" type="module"></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> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head> </head>
<body tabindex="1"> <body tabindex="1">
<div id="viewerContainer"> <div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div> <div id="viewer" class="pdfViewer"></div>
</div> </div>
<script src="simpleviewer.mjs" type="module"></script> <script src="simpleviewer.mjs" type="module"></script>
</body> </body>
</html> </html>

58
examples/components/singlepageviewer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2014 Mozilla Foundation Copyright 2014 Mozilla Foundation
@ -15,37 +15,37 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<html dir="ltr" mozdisallowselectionprint> <html dir="ltr" mozdisallowselectionprint>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="google" content="notranslate"> <meta name="google" content="notranslate" />
<title>PDF.js Single Page Viewer using built components</title> <title>PDF.js Single Page Viewer using built components</title>
<style> <style>
body { body {
background-color: #808080; background-color: #808080;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#viewerContainer { #viewerContainer {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<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.mjs" type="module"></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> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head> </head>
<body tabindex="1"> <body tabindex="1">
<div id="viewerContainer"> <div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div> <div id="viewer" class="pdfViewer"></div>
</div> </div>
<script src="singlepageviewer.mjs" type="module"></script> <script src="singlepageviewer.mjs" type="module"></script>
</body> </body>
</html> </html>

38
examples/image_decoders/jpeg_viewer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2018 Mozilla Foundation Copyright 2018 Mozilla Foundation
@ -15,26 +15,26 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<html dir="ltr" mozdisallowselectionprint> <html dir="ltr" mozdisallowselectionprint>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="google" content="notranslate"> <meta name="google" content="notranslate" />
<title>PDF.js standalone JpegImage parser</title> <title>PDF.js standalone JpegImage parser</title>
<style> <style>
body { body {
background-color: #808080; background-color: #808080;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
</style> </style>
<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.mjs" type="module"></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.mjs" type="module"></script> <script src="jpeg_viewer.mjs" type="module"></script>
</body> </body>
</html> </html>

123
examples/learning/helloworld.html
View File

@ -1,76 +1,71 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>'Hello, world!' example</title> <title>'Hello, world!' example</title>
</head> </head>
<body> <body>
<h1>'Hello, world!' example</h1>
<h1>'Hello, world!' example</h1> <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.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script> <script id="script" type="module">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
const url = "./helloworld.pdf";
<script id="script" type="module"> //
// // The workerSrc property shall be specified.
// If absolute URL from the remote server is provided, configure the CORS //
// header on that server. pdfjsLib.GlobalWorkerOptions.workerSrc = "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
//
const url = './helloworld.pdf';
// //
// The workerSrc property shall be specified. // Asynchronous download PDF
// //
pdfjsLib.GlobalWorkerOptions.workerSrc = const loadingTask = pdfjsLib.getDocument(url);
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs'; 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;
// //
// Asynchronous download PDF // Prepare canvas using PDF page dimensions
// //
const loadingTask = pdfjsLib.getDocument(url); const canvas = document.getElementById("the-canvas");
const pdf = await loadingTask.promise; const context = canvas.getContext("2d");
//
// 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;
// canvas.width = Math.floor(viewport.width * outputScale);
// Prepare canvas using PDF page dimensions canvas.height = Math.floor(viewport.height * outputScale);
// canvas.style.width = Math.floor(viewport.width) + "px";
const canvas = document.getElementById("the-canvas"); canvas.style.height = Math.floor(viewport.height) + "px";
const context = canvas.getContext("2d");
canvas.width = Math.floor(viewport.width * outputScale); const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
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] // Render PDF page into canvas context
: null; //
const renderContext = {
canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
</script>
// <hr />
// Render PDF page into canvas context <h2>JavaScript code:</h2>
// <pre id="code"></pre>
const renderContext = { <script>
canvasContext: context, document.getElementById("code").textContent = document.getElementById("script").text;
transform, </script>
viewport, </body>
};
page.render(renderContext);
</script>
<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
document.getElementById('code').textContent =
document.getElementById('script').text;
</script>
</body>
</html> </html>

134
examples/learning/helloworld64.html
View File

@ -1,81 +1,77 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>'Hello, world!' base64 example</title> <title>'Hello, world!' base64 example</title>
</head> </head>
<body> <body>
<h1>'Hello, world!' example</h1>
<h1>'Hello, world!' example</h1> <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.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></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.)
var pdfData = atob(
"JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog" +
"IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv" +
"TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K" +
"Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg" +
"L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+" +
"PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u" +
"dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq" +
"Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU" +
"CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu" +
"ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g" +
"CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw" +
"MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v" +
"dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G"
);
<script id="script" type="module"> //
// atob() is used to convert base64 encoded PDF to binary-like data. // The workerSrc property shall be specified.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/ //
// Base64_encoding_and_decoding.) pdfjsLib.GlobalWorkerOptions.workerSrc = "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
var pdfData = atob(
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
// // Opening PDF by passing its binary data as a string. It is still preferable
// The workerSrc property shall be specified. // to use Uint8Array, but string or array-like structure will work too.
// var loadingTask = pdfjsLib.getDocument({ data: pdfData });
pdfjsLib.GlobalWorkerOptions.workerSrc = var pdf = await loadingTask.promise;
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs'; // 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;
// Opening PDF by passing its binary data as a string. It is still preferable // Prepare canvas using PDF page dimensions.
// to use Uint8Array, but string or array-like structure will work too. var canvas = document.getElementById("the-canvas");
var loadingTask = pdfjsLib.getDocument({ data: pdfData, }); var context = canvas.getContext("2d");
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. canvas.width = Math.floor(viewport.width * outputScale);
var canvas = document.getElementById('the-canvas'); canvas.height = Math.floor(viewport.height * outputScale);
var context = canvas.getContext('2d'); canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
canvas.width = Math.floor(viewport.width * outputScale); var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
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 // Render PDF page into canvas context.
? [outputScale, 0, 0, outputScale, 0, 0] var renderContext = {
: null; canvasContext: context,
transform,
viewport,
};
page.render(renderContext);
</script>
// Render PDF page into canvas context. <hr />
var renderContext = { <h2>JavaScript code:</h2>
canvasContext: context, <pre id="code"></pre>
transform, <script>
viewport, document.getElementById("code").textContent = document.getElementById("script").text;
}; </script>
page.render(renderContext); </body>
</script>
<hr>
<h2>JavaScript code:</h2>
<pre id="code"></pre>
<script>
document.getElementById('code').textContent =
document.getElementById('script').text;
</script>
</body>
</html> </html>

235
examples/learning/prevnext.html
View File

@ -1,139 +1,134 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Previous/Next example</title> <title>Previous/Next example</title>
</head> </head>
<body> <body>
<h1>'Previous/Next' example</h1>
<h1>'Previous/Next' example</h1> <div>
<button id="prev" type="button">Previous</button>
<button id="next" type="button">Next</button>
&nbsp; &nbsp;
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div> <div>
<button id="prev" type="button">Previous</button> <canvas id="the-canvas" style="border: 1px solid black; direction: ltr"></canvas>
<button id="next" type="button">Next</button> </div>
&nbsp; &nbsp;
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div> <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
</div>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script> <script id="script" type="module">
//
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
var url = "../../web/compressed.tracemonkey-pldi-09.pdf";
<script id="script" type="module"> //
// // In cases when the pdf.worker.js is located at the different folder than the
// If absolute URL from the remote server is provided, configure the CORS // PDF.js's one, or the PDF.js is executed via eval(), the workerSrc property
// header on that server. // shall be specified.
// //
var url = '../../web/compressed.tracemonkey-pldi-09.pdf'; pdfjsLib.GlobalWorkerOptions.workerSrc = "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
// var pdfDoc = null,
// In cases when the pdf.worker.js is located at the different folder than the pageNum = 1,
// PDF.js's one, or the PDF.js is executed via eval(), the workerSrc property pageRendering = false,
// shall be specified. pageNumPending = null,
// scale = 0.8,
pdfjsLib.GlobalWorkerOptions.workerSrc = canvas = document.getElementById("the-canvas"),
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs'; ctx = canvas.getContext("2d");
var pdfDoc = null, /**
pageNum = 1, * Get page info from document, resize canvas accordingly, and render page.
pageRendering = false, * @param num Page number.
pageNumPending = null, */
scale = 0.8, function renderPage(num) {
canvas = document.getElementById('the-canvas'), pageRendering = true;
ctx = canvas.getContext('2d'); // Using promise to fetch the page
pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport({ scale: scale });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;
/** canvas.width = Math.floor(viewport.width * outputScale);
* Get page info from document, resize canvas accordingly, and render page. canvas.height = Math.floor(viewport.height * outputScale);
* @param num Page number. canvas.style.width = Math.floor(viewport.width) + "px";
*/ canvas.style.height = Math.floor(viewport.height) + "px";
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({ scale: scale, });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;
canvas.width = Math.floor(viewport.width * outputScale); var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
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 // Render PDF page into canvas context
? [outputScale, 0, 0, outputScale, 0, 0] var renderContext = {
: null; canvasContext: ctx,
transform: transform,
viewport: viewport,
};
var renderTask = page.render(renderContext);
// Render PDF page into canvas context // Wait for rendering to finish
var renderContext = { renderTask.promise.then(function () {
canvasContext: ctx, pageRendering = false;
transform: transform, if (pageNumPending !== null) {
viewport: viewport, // New page rendering is pending
}; renderPage(pageNumPending);
var renderTask = page.render(renderContext); pageNumPending = null;
}
});
});
// Wait for rendering to finish // Update page counters
renderTask.promise.then(function () { document.getElementById("page_num").textContent = num;
pageRendering = false; }
if (pageNumPending !== null) {
// New page rendering is pending /**
renderPage(pageNumPending); * If another page rendering in progress, waits until the rendering is
pageNumPending = null; * finished. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
} }
}); }
});
// Update page counters /**
document.getElementById('page_num').textContent = num; * Displays previous page.
} */
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById("prev").addEventListener("click", onPrevPage);
/** /**
* If another page rendering in progress, waits until the rendering is * Displays next page.
* finished. Otherwise, executes rendering immediately. */
*/ function onNextPage() {
function queueRenderPage(num) { if (pageNum >= pdfDoc.numPages) {
if (pageRendering) { return;
pageNumPending = num; }
} else { pageNum++;
renderPage(num); queueRenderPage(pageNum);
} }
} document.getElementById("next").addEventListener("click", onNextPage);
/** /**
* Displays previous page. * Asynchronously downloads PDF.
*/ */
function onPrevPage() { var loadingTask = pdfjsLib.getDocument(url);
if (pageNum <= 1) { pdfDoc = await loadingTask.promise;
return; document.getElementById("page_count").textContent = pdfDoc.numPages;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/** // Initial/first page rendering
* Displays next page. renderPage(pageNum);
*/ </script>
function onNextPage() { </body>
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
var loadingTask = pdfjsLib.getDocument(url);
pdfDoc = await loadingTask.promise;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
</script>
</body>
</html> </html>

14
examples/mobile-viewer/viewer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2016 Mozilla Foundation Copyright 2016 Mozilla Foundation
@ -16,13 +16,13 @@ limitations under the License.
--> -->
<html dir="ltr"> <html dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>PDF.js viewer</title> <title>PDF.js viewer</title>
<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.mjs" type="module"></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> <script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
@ -46,12 +46,12 @@ limitations under the License.
<button class="toolbarButton pageUp" title="Previous Page" id="previous" type="button"></button> <button class="toolbarButton pageUp" title="Previous Page" id="previous" type="button"></button>
<button class="toolbarButton pageDown" title="Next Page" id="next" type="button"></button> <button class="toolbarButton pageDown" title="Next Page" id="next" type="button"></button>
<input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1"> <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" />
<button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" type="button"></button> <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" type="button"></button>
<button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" type="button"></button> <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" type="button"></button>
</footer> </footer>
<script src="viewer.mjs" type="module"></script> <script src="viewer.mjs" type="module"></script>
</body> </body>
</html> </html>

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

@ -1,14 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<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.mjs" type="module"></script> <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="pdf2svg.mjs" type="module"></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>
<div id="pageContainer" style="display: inline-block; border: solid 1px black;"> <div id="pageContainer" style="display: inline-block; border: solid 1px black"></div>
</div> </body>
</body>
</html> </html>

18
examples/webpack/index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>webpack example</title> <title>webpack example</title>
<script src="../../build/webpack/main.bundle.js"></script> <script src="../../build/webpack/main.bundle.js"></script>
</head> </head>
<body> <body>
<canvas id="theCanvas"></canvas> <canvas id="theCanvas"></canvas>
</body> </body>
</html> </html>

312
extensions/chromium/options/options.html
View File

@ -15,171 +15,171 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>PDF.js viewer options</title> <title>PDF.js viewer options</title>
<style> <style>
body { body {
min-width: 400px; /* a page at the settings page is at least 400px wide */ min-width: 400px; /* a page at the settings page is at least 400px wide */
margin: 14px 17px; /* already added by default in Chrome 40.0.2212.0 */ margin: 14px 17px; /* already added by default in Chrome 40.0.2212.0 */
} }
.settings-row { .settings-row {
margin: 1em 0; margin: 1em 0;
} }
.checkbox label { .checkbox label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.checkbox label input { .checkbox label input {
flex-shrink: 0; flex-shrink: 0;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="settings-boxes"></div> <div id="settings-boxes"></div>
<button id="reset-button" type="button">Restore default settings</button> <button id="reset-button" type="button">Restore default settings</button>
<template id="checkbox-template"> <template id="checkbox-template">
<div class="settings-row checkbox"> <div class="settings-row checkbox">
<label> <label>
<input type="checkbox"> <input type="checkbox" />
<span></span> <span></span>
</label> </label>
</div> </div>
</template> </template>
<template id="viewerCssTheme-template"> <template id="viewerCssTheme-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="0">Use system theme</option> <option value="0">Use system theme</option>
<option value="1">Light theme</option> <option value="1">Light theme</option>
<option value="2">Dark theme</option> <option value="2">Dark theme</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="viewOnLoad-template"> <template id="viewOnLoad-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="-1">Default</option> <option value="-1">Default</option>
<option value="0">Show previous position</option> <option value="0">Show previous position</option>
<option value="1">Show initial position</option> <option value="1">Show initial position</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="defaultZoomValue-template"> <template id="defaultZoomValue-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="auto" selected="selected">Automatic Zoom</option> <option value="auto" selected="selected">Automatic Zoom</option>
<option value="page-actual">Actual Size</option> <option value="page-actual">Actual Size</option>
<option value="page-fit">Page Fit</option> <option value="page-fit">Page Fit</option>
<option value="page-width">Page Width</option> <option value="page-width">Page Width</option>
<option value="custom" class="custom-zoom" hidden></option> <option value="custom" class="custom-zoom" hidden></option>
<option value="50">50%</option> <option value="50">50%</option>
<option value="75">75%</option> <option value="75">75%</option>
<option value="100">100%</option> <option value="100">100%</option>
<option value="125">125%</option> <option value="125">125%</option>
<option value="150">150%</option> <option value="150">150%</option>
<option value="200">200%</option> <option value="200">200%</option>
<option value="300">300%</option> <option value="300">300%</option>
<option value="400">400%</option> <option value="400">400%</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="sidebarViewOnLoad-template"> <template id="sidebarViewOnLoad-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="-1">Default</option> <option value="-1">Default</option>
<option value="0">Do not show sidebar</option> <option value="0">Do not show sidebar</option>
<option value="1">Show thumbnails in sidebar</option> <option value="1">Show thumbnails in sidebar</option>
<option value="2">Show document outline in sidebar</option> <option value="2">Show document outline in sidebar</option>
<option value="3">Show attachments in sidebar</option> <option value="3">Show attachments in sidebar</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="cursorToolOnLoad-template"> <template id="cursorToolOnLoad-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="0">Text selection tool</option> <option value="0">Text selection tool</option>
<option value="1">Hand tool</option> <option value="1">Hand tool</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="textLayerMode-template"> <template id="textLayerMode-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="0">Disable text selection</option> <option value="0">Disable text selection</option>
<option value="1">Enable text selection</option> <option value="1">Enable text selection</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="externalLinkTarget-template"> <template id="externalLinkTarget-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="0">Default</option> <option value="0">Default</option>
<option value="1">Current window/tab</option> <option value="1">Current window/tab</option>
<option value="2">New window/tab</option> <option value="2">New window/tab</option>
<option value="3">Parent window/tab</option> <option value="3">Parent window/tab</option>
<option value="4">Top window/tab</option> <option value="4">Top window/tab</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="scrollModeOnLoad-template"> <template id="scrollModeOnLoad-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="-1">Default</option> <option value="-1">Default</option>
<option value="3">Page scrolling</option> <option value="3">Page scrolling</option>
<option value="0">Vertical scrolling</option> <option value="0">Vertical scrolling</option>
<option value="1">Horizontal scrolling</option> <option value="1">Horizontal scrolling</option>
<option value="2">Wrapped scrolling</option> <option value="2">Wrapped scrolling</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<template id="spreadModeOnLoad-template"> <template id="spreadModeOnLoad-template">
<div class="settings-row"> <div class="settings-row">
<label> <label>
<span></span> <span></span>
<select> <select>
<option value="-1">Default</option> <option value="-1">Default</option>
<option value="0">No spreads</option> <option value="0">No spreads</option>
<option value="1">Odd spreads</option> <option value="1">Odd spreads</option>
<option value="2">Even spreads</option> <option value="2">Even spreads</option>
</select> </select>
</label> </label>
</div> </div>
</template> </template>
<script src="options.js"></script> <script src="options.js"></script>
</body> </body>
</html> </html>

4
external/builder/builder.mjs vendored
View File

@ -151,7 +151,7 @@ function preprocess(inFilename, outFilename, defines) {
let state = STATE_NONE; let state = STATE_NONE;
const stack = []; const stack = [];
const control = const control =
/^(?:\/\/|\s*\/\*|<!--)\s*#(if|elif|else|endif|expand|include|error)\b(?:\s+(.*?)(?:\*\/|-->)?$)?/; /^(?:\/\/|\s*\/\*|\s*<!--)\s*#(if|elif|else|endif|expand|include|error)\b(?:\s+(.*?)(?:\*\/|-->)?$)?/;
while ((line = readLine()) !== null) { while ((line = readLine()) !== null) {
++lineNumber; ++lineNumber;
@ -213,7 +213,7 @@ function preprocess(inFilename, outFilename, defines) {
) { ) {
writeLine( writeLine(
line line
.replaceAll(/^\/\/|^<!--/g, " ") .replaceAll(/^\/\/|^\s*<!--/g, " ")
.replaceAll(/(^\s*)\/\*/g, "$1 ") .replaceAll(/(^\s*)\/\*/g, "$1 ")
.replaceAll(/\*\/$|-->$/g, "") .replaceAll(/\*\/$|-->$/g, "")
); );

5
gulpfile.mjs
View File

@ -2023,7 +2023,7 @@ gulp.task(
gulp.task("lint", function (done) { gulp.task("lint", function (done) {
console.log(); console.log();
console.log("### Linting JS/CSS/JSON/SVG files"); console.log("### Linting JS/CSS/JSON/SVG/HTML files");
// Ensure that we lint the Firefox specific *.jsm files too. // Ensure that we lint the Firefox specific *.jsm files too.
const esLintOptions = [ const esLintOptions = [
@ -2047,9 +2047,10 @@ gulp.task("lint", function (done) {
const prettierOptions = [ const prettierOptions = [
"node_modules/prettier/bin/prettier.cjs", "node_modules/prettier/bin/prettier.cjs",
"**/*.json", "**/*.json",
"**/*.html",
]; ];
if (process.argv.includes("--fix")) { if (process.argv.includes("--fix")) {
prettierOptions.push("--log-level", "silent", "--write"); prettierOptions.push("--log-level", "error", "--write");
} else { } else {
prettierOptions.push("--log-level", "warn", "--check"); prettierOptions.push("--log-level", "warn", "--check");
} }

37
test/font/font_test.html
View File

@ -1,25 +1,24 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<title>PDF.js font tests</title> <title>PDF.js font tests</title>
<link rel="stylesheet" type="text/css" href="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> <link rel="stylesheet" type="text/css" href="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.css" />
<script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> <script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> <script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"pdfjs/": "../../src/", "pdfjs/": "../../src/",
"pdfjs-lib": "../../src/pdf.js", "pdfjs-lib": "../../src/pdf.js",
"pdfjs-web/": "../../web/", "pdfjs-web/": "../../web/",
"pdfjs-test/": "../" "pdfjs-test/": "../"
}
} }
} </script>
</script> <script src="jasmine-boot.js" type="module"></script>
<script src="jasmine-boot.js" type="module"></script> </head>
</head> <body></body>
<body>
</body>
</html> </html>

263
test/resources/reftest-analyzer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2012 Mozilla Foundation Copyright 2012 Mozilla Foundation
@ -30,149 +30,150 @@ the terms of any one of the MPL, the GPL or the LGPL.
Original author: L. David Baron <dbaron@dbaron.org> Original author: L. David Baron <dbaron@dbaron.org>
--> -->
<html> <html>
<head> <head>
<title>Reftest analyzer</title> <title>Reftest analyzer</title>
<meta charset="utf-8"> <meta charset="utf-8" />
<link rel="stylesheet" href="reftest-analyzer.css"> <link rel="stylesheet" href="reftest-analyzer.css" />
<script src="reftest-analyzer.js"></script> <script src="reftest-analyzer.js"></script>
</head> </head>
<body> <body>
<div id="entry"> <div id="entry">
<h1>Reftest analyzer</h1> <h1>Reftest analyzer</h1>
<p> <p>
Paste your log into this textarea:<br> Paste your log into this textarea:<br />
<textarea cols="80" rows="10" id="logEntry"></textarea><br> <textarea cols="80" rows="10" id="logEntry"></textarea><br />
<input type="button" value="Process pasted log" id="logPasted"> <input type="button" value="Process pasted log" id="logPasted" />
</p> </p>
<p> <p>
<br>...or load it from a file:<br> <br />...or load it from a file:<br />
<input type="file" id="fileEntry"> <input type="file" id="fileEntry" />
</p> </p>
</div> </div>
<div id="loading">Loading log...</div> <div id="loading">Loading log...</div>
<div id="viewer"> <div id="viewer">
<div id="pixelarea"> <div id="pixelarea">
<div id="pixelinfo"> <div id="pixelinfo">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Pixel at:</th> <th>Pixel at:</th>
<td colspan="2" id="coords"></td> <td colspan="2" id="coords"></td>
</tr> </tr>
<tr> <tr>
<th>Test:</th> <th>Test:</th>
<td id="pix1rgb"></td> <td id="pix1rgb"></td>
<td id="pix1hex"></td> <td id="pix1hex"></td>
</tr> </tr>
<tr> <tr>
<th>Reference:</th> <th>Reference:</th>
<td id="pix2rgb"></td> <td id="pix2rgb"></td>
<td id="pix2hex"></td> <td id="pix2hex"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div> <div>
<div id="pixelhint">? <div id="pixelhint">
<div> ?
<p>Move the mouse over the reftest image on the right to show <div>
magnified pixels on the left. The color information above is for <p>
the pixel centered in the magnified view.</p> Move the mouse over the reftest image on the right to show magnified pixels on the left. The color information above is for the pixel centered
<p>The test is shown in the upper triangle of each pixel and in the magnified view.
the reference is shown in the lower triangle.</p> </p>
<p>The test is shown in the upper triangle of each pixel and the reference is shown in the lower triangle.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="magnification">
<svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" shape-rendering="optimizeSpeed">
<g id="mag" />
</svg>
</div>
</div> </div>
<div id="magnification"> <div id="itemlist">
<svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" shape-rendering="optimizeSpeed"> <table id="itemtable"></table>
<g id="mag" />
</svg>
</div> </div>
</div> <div id="imagepane">
<div id="itemlist"> <form id="imgcontrols">
<table id="itemtable"></table> <label>
</div> <input type="radio" name="which" id="testImage" value="0" checked="checked" />
<div id="imagepane"> Test
<form id="imgcontrols"> </label>
<label> <label>
<input type="radio" name="which" id="testImage" value="0" checked="checked"> Test <input type="radio" name="which" id="referenceImage" value="1" />
</label> Reference
<label> </label>
<input type="radio" name="which" id="referenceImage" value="1"> Reference <label> <input type="checkbox" id="differences" /> Circle differences </label>
</label> <span id="shortcuts">Shortcuts: n=next p=previous t=toggle d=differences</span>
<label> </form>
<input type="checkbox" id="differences"> Circle differences <div id="images">
</label> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg">
<span id="shortcuts">Shortcuts: n=next p=previous t=toggle d=differences</span> <defs>
</form> <!-- use sRGB to avoid loss of data -->
<div id="images"> <filter id="showDifferences" x="0%" y="0%" width="100%" height="100%" style="color-interpolation-filters: sRGB">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg"> <feImage id="feimage1" result="img1" xlink:href="#image1" />
<defs> <feImage id="feimage2" result="img2" xlink:href="#image2" />
<!-- use sRGB to avoid loss of data --> <!-- inv1 and inv2 are the images with RGB inverted -->
<filter id="showDifferences" x="0%" y="0%" width="100%" height="100%" <feComponentTransfer result="inv1" in="img1">
style="color-interpolation-filters: sRGB"> <feFuncR type="linear" slope="-1" intercept="1" />
<feImage id="feimage1" result="img1" xlink:href="#image1" /> <feFuncG type="linear" slope="-1" intercept="1" />
<feImage id="feimage2" result="img2" xlink:href="#image2" /> <feFuncB type="linear" slope="-1" intercept="1" />
<!-- inv1 and inv2 are the images with RGB inverted --> </feComponentTransfer>
<feComponentTransfer result="inv1" in="img1"> <feComponentTransfer result="inv2" in="img2">
<feFuncR type="linear" slope="-1" intercept="1" /> <feFuncR type="linear" slope="-1" intercept="1" />
<feFuncG type="linear" slope="-1" intercept="1" /> <feFuncG type="linear" slope="-1" intercept="1" />
<feFuncB type="linear" slope="-1" intercept="1" /> <feFuncB type="linear" slope="-1" intercept="1" />
</feComponentTransfer> </feComponentTransfer>
<feComponentTransfer result="inv2" in="img2"> <!-- w1 will have non-white pixels anywhere that img2
<feFuncR type="linear" slope="-1" intercept="1" />
<feFuncG type="linear" slope="-1" intercept="1" />
<feFuncB type="linear" slope="-1" intercept="1" />
</feComponentTransfer>
<!-- w1 will have non-white pixels anywhere that img2
is brighter than img1, and w2 for the reverse. is brighter than img1, and w2 for the reverse.
It would be nice not to have to go through these It would be nice not to have to go through these
intermediate states, but feComposite intermediate states, but feComposite
type="arithmetic" can't transform the RGB channels type="arithmetic" can't transform the RGB channels
and leave the alpha channel untouched. --> and leave the alpha channel untouched. -->
<feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" /> <feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" />
<feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" /> <feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" />
<!-- c1 will have non-black pixels anywhere that img2 <!-- c1 will have non-black pixels anywhere that img2
is brighter than img1, and c2 for the reverse --> is brighter than img1, and c2 for the reverse -->
<feComponentTransfer result="c1" in="w1"> <feComponentTransfer result="c1" in="w1">
<feFuncR type="linear" slope="-1" intercept="1" /> <feFuncR type="linear" slope="-1" intercept="1" />
<feFuncG type="linear" slope="-1" intercept="1" /> <feFuncG type="linear" slope="-1" intercept="1" />
<feFuncB type="linear" slope="-1" intercept="1" /> <feFuncB type="linear" slope="-1" intercept="1" />
</feComponentTransfer> </feComponentTransfer>
<feComponentTransfer result="c2" in="w2"> <feComponentTransfer result="c2" in="w2">
<feFuncR type="linear" slope="-1" intercept="1" /> <feFuncR type="linear" slope="-1" intercept="1" />
<feFuncG type="linear" slope="-1" intercept="1" /> <feFuncG type="linear" slope="-1" intercept="1" />
<feFuncB type="linear" slope="-1" intercept="1" /> <feFuncB type="linear" slope="-1" intercept="1" />
</feComponentTransfer> </feComponentTransfer>
<!-- c will be nonblack (and fully on) for every pixel+component where there are differences --> <!-- c will be nonblack (and fully on) for every pixel+component where there are differences -->
<feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" /> <feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" />
<!-- a will be opaque for every pixel with differences and transparent for all others --> <!-- a will be opaque for every pixel with differences and transparent for all others -->
<feColorMatrix result="a" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 0" /> <feColorMatrix result="a" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 0" />
<!-- a, dilated by 4 pixels --> <!-- a, dilated by 4 pixels -->
<feMorphology result="dila4" in="a" operator="dilate" radius="4" /> <feMorphology result="dila4" in="a" operator="dilate" radius="4" />
<!-- a, dilated by 1 pixel --> <!-- a, dilated by 1 pixel -->
<feMorphology result="dila1" in="a" operator="dilate" radius="1" /> <feMorphology result="dila1" in="a" operator="dilate" radius="1" />
<!-- all the pixels in the 3-pixel dilation of a but not in the 1-pixel dilation of a, to highlight the diffs --> <!-- all the pixels in the 3-pixel dilation of a but not in the 1-pixel dilation of a, to highlight the diffs -->
<feComposite result="highlight" in="dila4" in2="dila1" operator="out" /> <feComposite result="highlight" in="dila4" in2="dila1" operator="out" />
<feFlood result="red" flood-color="red" /> <feFlood result="red" flood-color="red" />
<feComposite result="redhighlight" in="red" in2="highlight" operator="in" /> <feComposite result="redhighlight" in="red" in2="highlight" operator="in" />
<feFlood result="black" flood-color="black" flood-opacity="0.5" /> <feFlood result="black" flood-color="black" flood-opacity="0.5" />
<feMerge> <feMerge>
<feMergeNode in="black" /> <feMergeNode in="black" />
<feMergeNode in="redhighlight" /> <feMergeNode in="redhighlight" />
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<g id="magnify"> <g id="magnify">
<image x="0" y="0" id="image1" /> <image x="0" y="0" id="image1" />
<image x="0" y="0" id="image2" /> <image x="0" y="0" id="image2" />
</g> </g>
<rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" /> <rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
</svg> </svg>
</div>
</div>
</div> </div>
</div> </body>
</body>
</html> </html>

18
test/test_slave.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2015 Mozilla Foundation Copyright 2015 Mozilla Foundation
@ -17,29 +17,29 @@ limitations under the License.
<html> <html>
<head> <head>
<title>PDF.js test slave</title> <title>PDF.js test slave</title>
<meta charset="utf-8"> <meta charset="utf-8" />
<script src="../build/generic/build/pdf.mjs" type="module"></script> <script src="../build/generic/build/pdf.mjs" type="module"></script>
<script src="../build/components/pdf_viewer.mjs" type="module"></script> <script src="../build/components/pdf_viewer.mjs" type="module"></script>
<link rel="resource" type="application/l10n" href="../build/generic/web/locale/locale.json"> <link rel="resource" type="application/l10n" href="../build/generic/web/locale/locale.json" />
</head> </head>
<body> <body>
<p>Inflight requests: <span id="inflight"></span></p> <p>Inflight requests: <span id="inflight"></span></p>
<p> <p>
<input type="checkbox" id="disableScrolling"> <input type="checkbox" id="disableScrolling" />
<label for="disableScrolling">Disable automatic scrolling</label> <label for="disableScrolling">Disable automatic scrolling</label>
</p> </p>
<pre id="output" style="max-height: 800px; overflow-y: scroll;"></pre> <pre id="output" style="max-height: 800px; overflow-y: scroll"></pre>
<div id="end"></div> <div id="end"></div>
</body> </body>
<script type="module"> <script type="module">
import { Driver } from "./driver.js"; import { Driver } from "./driver.js";
const driver = new Driver({ const driver = new Driver({
disableScrolling: document.getElementById('disableScrolling'), disableScrolling: document.getElementById("disableScrolling"),
inflight: document.getElementById('inflight'), inflight: document.getElementById("inflight"),
output: document.getElementById('output'), output: document.getElementById("output"),
end: document.getElementById('end') end: document.getElementById("end"),
}); });
driver.run(); driver.run();
</script> </script>

93
test/unit/unit_test.html
View File

@ -1,56 +1,55 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<title>PDF.js unit tests</title> <title>PDF.js unit tests</title>
<link rel="stylesheet" type="text/css" href="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> <link rel="stylesheet" type="text/css" href="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.css" />
<script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> <script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> <script src="../../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"pdfjs/": "../../src/", "pdfjs/": "../../src/",
"pdfjs-lib": "../../src/pdf.js", "pdfjs-lib": "../../src/pdf.js",
"pdfjs-web/": "../../web/", "pdfjs-web/": "../../web/",
"pdfjs-test/": "../", "pdfjs-test/": "../",
"fluent-bundle": "../../node_modules/@fluent/bundle/esm/index.js", "fluent-bundle": "../../node_modules/@fluent/bundle/esm/index.js",
"fluent-dom": "../../node_modules/@fluent/dom/esm/index.js", "fluent-dom": "../../node_modules/@fluent/dom/esm/index.js",
"cached-iterable": "../../node_modules/cached-iterable/src/index.mjs", "cached-iterable": "../../node_modules/cached-iterable/src/index.mjs",
"display-cmap_reader_factory": "../../src/display/cmap_reader_factory.js", "display-cmap_reader_factory": "../../src/display/cmap_reader_factory.js",
"display-standard_fontdata_factory": "../../src/display/standard_fontdata_factory.js", "display-standard_fontdata_factory": "../../src/display/standard_fontdata_factory.js",
"display-wasm_factory": "../../src/display/wasm_factory.js", "display-wasm_factory": "../../src/display/wasm_factory.js",
"display-fetch_stream": "../../src/display/fetch_stream.js", "display-fetch_stream": "../../src/display/fetch_stream.js",
"display-network": "../../src/display/network.js", "display-network": "../../src/display/network.js",
"display-node_stream": "../../src/display/stubs.js", "display-node_stream": "../../src/display/stubs.js",
"display-node_utils": "../../src/display/stubs.js", "display-node_utils": "../../src/display/stubs.js",
"web-alt_text_manager": "../../web/alt_text_manager.js", "web-alt_text_manager": "../../web/alt_text_manager.js",
"web-annotation_editor_params": "../../web/annotation_editor_params.js", "web-annotation_editor_params": "../../web/annotation_editor_params.js",
"web-download_manager": "../../web/download_manager.js", "web-download_manager": "../../web/download_manager.js",
"web-external_services": "../../web/genericcom.js", "web-external_services": "../../web/genericcom.js",
"web-null_l10n": "../../web/genericl10n.js", "web-null_l10n": "../../web/genericl10n.js",
"web-pdf_attachment_viewer": "../../web/pdf_attachment_viewer.js", "web-pdf_attachment_viewer": "../../web/pdf_attachment_viewer.js",
"web-pdf_cursor_tools": "../../web/pdf_cursor_tools.js", "web-pdf_cursor_tools": "../../web/pdf_cursor_tools.js",
"web-pdf_document_properties": "../../web/pdf_document_properties.js", "web-pdf_document_properties": "../../web/pdf_document_properties.js",
"web-pdf_find_bar": "../../web/pdf_find_bar.js", "web-pdf_find_bar": "../../web/pdf_find_bar.js",
"web-pdf_layer_viewer": "../../web/pdf_layer_viewer.js", "web-pdf_layer_viewer": "../../web/pdf_layer_viewer.js",
"web-pdf_outline_viewer": "../../web/pdf_outline_viewer.js", "web-pdf_outline_viewer": "../../web/pdf_outline_viewer.js",
"web-pdf_presentation_mode": "../../web/pdf_presentation_mode.js", "web-pdf_presentation_mode": "../../web/pdf_presentation_mode.js",
"web-pdf_sidebar": "../../web/pdf_sidebar.js", "web-pdf_sidebar": "../../web/pdf_sidebar.js",
"web-pdf_thumbnail_viewer": "../../web/pdf_thumbnail_viewer.js", "web-pdf_thumbnail_viewer": "../../web/pdf_thumbnail_viewer.js",
"web-preferences": "../../web/genericcom.js", "web-preferences": "../../web/genericcom.js",
"web-print_service": "../../web/pdf_print_service.js", "web-print_service": "../../web/pdf_print_service.js",
"web-secondary_toolbar": "../../web/secondary_toolbar.js", "web-secondary_toolbar": "../../web/secondary_toolbar.js",
"web-toolbar": "../../web/toolbar.js" "web-toolbar": "../../web/toolbar.js"
}
} }
} </script>
</script> <script src="jasmine-boot.js" type="module"></script>
<script src="jasmine-boot.js" type="module"></script> </head>
</head> <body></body>
<body>
</body>
</html> </html>

61
web/viewer-geckoview.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<!-- <!--
Copyright 2012 Mozilla Foundation Copyright 2012 Mozilla Foundation
@ -22,26 +22,26 @@ See https://github.com/adobe-type-tools/cmap-resources
--> -->
<html dir="ltr" mozdisallowselectionprint> <html dir="ltr" mozdisallowselectionprint>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>PDF.js viewer</title> <title>PDF.js viewer</title>
<!--#if MOZCENTRAL--> <!--#if MOZCENTRAL-->
<!--#include viewer-snippet-firefox-extension.html--> <!--#include viewer-snippet-firefox-extension.html-->
<!--#endif--> <!--#endif-->
<!--#if MOZCENTRAL--> <!--#if MOZCENTRAL-->
<!--<link rel="stylesheet" href="resource://pdf.js/web/viewer.css">--> <!--<link rel="stylesheet" href="resource://pdf.js/web/viewer.css">-->
<!--<link rel="localization" href="toolkit/pdfviewer/viewer.ftl"/>--> <!--<link rel="localization" href="toolkit/pdfviewer/viewer.ftl"/>-->
<!--#else--> <!--#else-->
<link rel="stylesheet" href="viewer-geckoview.css"> <link rel="stylesheet" href="viewer-geckoview.css" />
<!--#endif--> <!--#endif-->
<!--#if !MOZCENTRAL--> <!--#if !MOZCENTRAL-->
<link rel="resource" type="application/l10n" href="locale/locale.json"> <link rel="resource" type="application/l10n" href="locale/locale.json" />
<!--#endif--> <!--#endif-->
<!--#if !MOZCENTRAL--> <!--#if !MOZCENTRAL-->
<script> <script>
if (typeof PDFJSDev === "undefined") { if (typeof PDFJSDev === "undefined") {
window.isGECKOVIEW = true; window.isGECKOVIEW = true;
@ -91,17 +91,14 @@ See https://github.com/adobe-type-tools/cmap-resources
} }
</script> </script>
<script src="viewer-geckoview.js" type="module"></script> <script src="viewer-geckoview.js" type="module"></script>
<!--#else--> <!--#else-->
<!--<script src="resource://pdf.js/web/viewer.mjs" type="module"></script>--> <!--<script src="resource://pdf.js/web/viewer.mjs" type="module"></script>-->
<!--#endif--> <!--#endif-->
</head> </head>
<body tabindex="0"> <body tabindex="0">
<div id="outerContainer"> <div id="outerContainer">
<div id="mainContainer"> <div id="mainContainer">
<div id="floatingToolbar"> <div id="floatingToolbar">
<button id="download" class="toolbarButton" type="button" tabindex="0" data-l10n-id="pdfjs-download-button"> <button id="download" class="toolbarButton" type="button" tabindex="0" data-l10n-id="pdfjs-download-button">
<span data-l10n-id="pdfjs-download-button-label"></span> <span data-l10n-id="pdfjs-download-button-label"></span>
@ -111,7 +108,8 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="viewerContainer" tabindex="0"> <div id="viewerContainer" tabindex="0">
<div id="viewer" class="pdfViewer"></div> <div id="viewer" class="pdfViewer"></div>
</div> </div>
</div> <!-- mainContainer --> </div>
<!-- mainContainer -->
<div id="dialogContainer"> <div id="dialogContainer">
<dialog id="passwordDialog"> <dialog id="passwordDialog">
@ -119,16 +117,21 @@ See https://github.com/adobe-type-tools/cmap-resources
<label for="password" id="passwordText" data-l10n-id="pdfjs-password-label"></label> <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label"></label>
</div> </div>
<div class="row"> <div class="row">
<input type="password" id="password" class="toolbarField"> <input type="password" id="password" class="toolbarField" />
</div> </div>
<div class="buttonRow"> <div class="buttonRow">
<button id="passwordCancel" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-cancel-button"></span></button> <button id="passwordCancel" class="dialogButton" type="button">
<button id="passwordSubmit" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-ok-button"></span></button> <span data-l10n-id="pdfjs-password-cancel-button"></span>
</button>
<button id="passwordSubmit" class="dialogButton" type="button">
<span data-l10n-id="pdfjs-password-ok-button"></span>
</button>
</div> </div>
</dialog> </dialog>
</div> <!-- dialogContainer --> </div>
<!-- dialogContainer -->
</div> <!-- outerContainer --> </div>
<!-- outerContainer -->
<div id="printContainer"></div> <div id="printContainer"></div>
</body> </body>
</html> </html>

4
web/viewer-snippet-chrome-extension.html
View File

@ -1,4 +1,4 @@
<!-- This snippet is used in the Chromium extension (included from viewer.html) --> <!-- This snippet is used in the Chromium extension (included from viewer.html) -->
<base href="/content/web/"> <base href="/content/web/" />
<link rel="resource" type="application/l10n" href="locale/locale.json"> <link rel="resource" type="application/l10n" href="locale/locale.json" />
<script src="../build/pdf.mjs" type="module"></script> <script src="../build/pdf.mjs" type="module"></script>

16
web/viewer-snippet-chrome-overlays.html
View File

@ -4,7 +4,9 @@
users with recognizing which checkbox they have to click when they users with recognizing which checkbox they have to click when they
visit chrome://extensions. visit chrome://extensions.
--> -->
<p id="chrome-pdfjs-logo-bg" style=" <p
id="chrome-pdfjs-logo-bg"
style="
display: block; display: block;
padding-left: 60px; padding-left: 60px;
min-height: 48px; min-height: 48px;
@ -12,19 +14,19 @@
background-repeat: no-repeat; background-repeat: no-repeat;
font-size: 14px; font-size: 14px;
line-height: 1.8em; line-height: 1.8em;
word-break: break-all;"> word-break: break-all;
Click on "
"<span id="chrome-file-access-label">Allow access to file URLs</span>" >
at Click on "<span id="chrome-file-access-label">Allow access to file URLs</span>" at
<a id="chrome-link-to-extensions-page">chrome://extensions</a> <a id="chrome-link-to-extensions-page">chrome://extensions</a>
<br> <br />
to view <span id="chrome-url-of-local-file">this PDF file.</span> to view <span id="chrome-url-of-local-file">this PDF file.</span>
</p> </p>
</div> </div>
<div class="row"> <div class="row">
<p> <p>
or select the file again: or select the file again:
<input type="file" id="chrome-file-fallback" accept=".pdf"> <input type="file" id="chrome-file-fallback" accept=".pdf" />
</p> </p>
</div> </div>
</dialog> </dialog>

2
web/viewer-snippet.html
View File

@ -1,3 +1,3 @@
<!-- This snippet is used in production (included from viewer.html) --> <!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="locale/locale.json"> <link rel="resource" type="application/l10n" href="locale/locale.json" />
<script src="../build/pdf.mjs" type="module"></script> <script src="../build/pdf.mjs" type="module"></script>

687
web/viewer.html
View File

File diff suppressed because it is too large Load Diff