scripts/template.ejs
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
}
#page {
width: 100%;
height: 100%;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id="page"></canvas>
<script>
(async () => {
const canvas = document.getElementById('page');
const context = canvas.getContext('2d');
const pdf = await pdfjsLib.getDocument('<%= data.uri %>').promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.0 });
canvas.height = viewport.height;
canvas.width = viewport.width;
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext);
})();
</script>
</body>
</html>