56a8c934dd
Despite this patch removing the `disableWorker` option itself, please note that we'll still fallback to loading the worker file(s) on the main-thread when running in environments without proper Web Worker support. Furthermore it's still possible, even with this patch, to force the use of fake workers by manually loading the necessary file using a `<script>` tag on the main-thread.[1] That way, the functionality of the now removed `SINGLE_FILE` build target and the resulting `build/pdf.combined.js` file can still be achieved simply by adding e.g. `<script src="build/pdf.worker.js"></script>` to the HTML (obviously with the path adjusted as needed). Finally note that the `disableWorker` option is a performance footgun, and unfortunately many existing third-party examples actually use it without providing any sort of warning/justification. --- [1] This approach is used in the default viewer, since certain kind of debugging may be easier if the code is running directly on the main-thread.
72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>'Hello, world!' base64 example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>'Hello, world!' example</h1>
|
|
|
|
<canvas id="the-canvas" style="border:1px solid black"></canvas>
|
|
|
|
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
|
|
|
|
<script id="script">
|
|
// 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');
|
|
|
|
//
|
|
// The workerSrc property shall be specified.
|
|
//
|
|
PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
|
|
|
|
// 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.
|
|
PDFJS.getDocument({data: pdfData}).then(function getPdfHelloWorld(pdf) {
|
|
// Fetch the first page.
|
|
pdf.getPage(1).then(function getPageHelloWorld(page) {
|
|
var scale = 1.5;
|
|
var viewport = page.getViewport(scale);
|
|
|
|
// Prepare canvas using PDF page dimensions.
|
|
var canvas = document.getElementById('the-canvas');
|
|
var context = canvas.getContext('2d');
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
|
|
// Render PDF page into canvas context.
|
|
var renderContext = {
|
|
canvasContext: context,
|
|
viewport: viewport
|
|
};
|
|
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>
|