1
0
Files
medical-notes/wip/templates/pdf.jinja2
Johan Dahlin 2e231ec64c
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 2m48s
vault backup: 2025-12-07 17:19:42
2025-12-07 17:19:42 +01:00

53 lines
2.0 KiB
Django/Jinja

{% extends "base.jinja2" %}
{% block title %}{{ filename }}{% endblock %}
{% block content %}
<h1>{{ title }}</h1>
<a id="download-btn" href="{{ filename }}" download class="download-button">Download PDF</a>
<canvas id="pdf-render"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script type="text/javascript">
const url = "{{ filename }}";
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
const loadingTask = pdfjsLib
.getDocument(url)
.promise
.then(function (pdf) {
console.log('PDF loaded');
pdf.getPage(1).then(function (page) {
console.log('Page loaded');
const scale = 1.5;
const viewport = page.getViewport({scale: scale});
const canvas = document.getElementById('pdf-render');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).promise.then(function () {
console.log('Page rendered');
});
});
})
.catch(function (reason) {
console.error(reason);
});
</script>
<style>
.download-button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
margin-bottom: 15px;
}
.download-button:hover {
background-color: #0056b3;
}
</style>
{% endblock %}