53 lines
2.0 KiB
Django/Jinja
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 %}
|