2014-09-16 23:24:48 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>'Hello, world!' example</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<h1>'Hello, world!' example</h1>
|
|
|
|
|
|
2020-01-12 20:25:23 +09:00
|
|
|
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
|
2014-09-16 23:24:48 +09:00
|
|
|
|
2023-10-14 18:24:56 +09:00
|
|
|
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
|
2014-09-16 23:24:48 +09:00
|
|
|
|
2023-10-14 18:24:56 +09:00
|
|
|
<script id="script" type="module">
|
2014-09-16 23:24:48 +09:00
|
|
|
//
|
|
|
|
|
// If absolute URL from the remote server is provided, configure the CORS
|
|
|
|
|
// header on that server.
|
|
|
|
|
//
|
2021-10-14 15:12:02 +09:00
|
|
|
const url = './helloworld.pdf';
|
2014-09-16 23:24:48 +09:00
|
|
|
|
|
|
|
|
//
|
2015-11-06 22:39:13 +09:00
|
|
|
// The workerSrc property shall be specified.
|
2014-09-16 23:24:48 +09:00
|
|
|
//
|
2018-03-16 05:49:28 +09:00
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
2023-10-14 18:24:56 +09:00
|
|
|
'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';
|
2014-09-16 23:24:48 +09:00
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// Asynchronous download PDF
|
|
|
|
|
//
|
2021-10-14 15:12:02 +09:00
|
|
|
const loadingTask = pdfjsLib.getDocument(url);
|
2023-10-14 18:24:56 +09:00
|
|
|
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;
|
2014-09-16 23:24:48 +09:00
|
|
|
|
2023-10-14 18:24:56 +09:00
|
|
|
//
|
|
|
|
|
// Prepare canvas using PDF page dimensions
|
|
|
|
|
//
|
|
|
|
|
const canvas = document.getElementById("the-canvas");
|
|
|
|
|
const context = canvas.getContext("2d");
|
2021-09-07 21:43:53 +09:00
|
|
|
|
2023-10-14 18:24:56 +09:00
|
|
|
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";
|
2021-09-07 21:43:53 +09:00
|
|
|
|
2023-10-14 18:24:56 +09:00
|
|
|
const transform = outputScale !== 1
|
|
|
|
|
? [outputScale, 0, 0, outputScale, 0, 0]
|
|
|
|
|
: null;
|
2014-09-16 23:24:48 +09:00
|
|
|
|
2023-10-14 18:24:56 +09:00
|
|
|
//
|
|
|
|
|
// Render PDF page into canvas context
|
|
|
|
|
//
|
|
|
|
|
const renderContext = {
|
|
|
|
|
canvasContext: context,
|
|
|
|
|
transform,
|
|
|
|
|
viewport,
|
|
|
|
|
};
|
|
|
|
|
page.render(renderContext);
|
2014-09-16 23:24:48 +09:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
<h2>JavaScript code:</h2>
|
|
|
|
|
<pre id="code"></pre>
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById('code').textContent =
|
|
|
|
|
document.getElementById('script').text;
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
