59c4041a49
This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code.
82 lines
3.0 KiB
HTML
82 lines
3.0 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; direction: ltr;"></canvas>
|
|
|
|
<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');
|
|
|
|
//
|
|
// The workerSrc property shall be specified.
|
|
//
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
|
'../../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, });
|
|
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');
|
|
|
|
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;
|
|
|
|
// Render PDF page into canvas context.
|
|
var renderContext = {
|
|
canvasContext: context,
|
|
transform,
|
|
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>
|