mirror of
https://github.com/Alexander-D-Karpov/akarpov
synced 2024-11-25 09:23:43 +03:00
fixed pdf
This commit is contained in:
parent
08cfbc211e
commit
5f2c738373
|
|
@ -3,166 +3,81 @@
|
||||||
|
|
||||||
def view(file: File):
|
def view(file: File):
|
||||||
static = """
|
static = """
|
||||||
<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/web/pdf_viewer.min.css" rel="stylesheet">
|
<style>
|
||||||
|
#pdf-viewer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-page-canvas {
|
||||||
|
display: block;
|
||||||
|
margin: 5px auto;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
"""
|
"""
|
||||||
|
|
||||||
content = (
|
content = (
|
||||||
"""
|
"""
|
||||||
<header>
|
<div id="pdf" class="col-auto">
|
||||||
<div class="col-auto">
|
|
||||||
<ul class="navigation">
|
|
||||||
<li class="navigation__item">
|
|
||||||
<!-- Navigate to the Previous and Next pages -->
|
|
||||||
<a href="#" class="previous round" id="prev_page">
|
|
||||||
<i class="fas fa-arrow-left"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Navigate to a specific page -->
|
|
||||||
<input type="number" value="1" id="current_page" />
|
|
||||||
|
|
||||||
<a href="#" class="next round" id="next_page">
|
|
||||||
<i class="fas fa-arrow-right"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Page Info -->
|
|
||||||
Page
|
|
||||||
<span id="page_num"></span>
|
|
||||||
of
|
|
||||||
<span id="page_count"></span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- Zoom In and Out -->
|
|
||||||
<li class="navigation__item">
|
|
||||||
<button class="zoom" id="zoom_in">
|
|
||||||
<i class="fas fa-search-plus"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="zoom" id="zoom_out">
|
|
||||||
<i class="fas fa-search-minus"></i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Canvas to place the PDF -->
|
|
||||||
<canvas id="canvas" class="canvas__container w-50"></canvas>
|
|
||||||
</div>
|
</div>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
"""
|
"""
|
||||||
+ f"""
|
+ f"""
|
||||||
const pdf = '{file.file.url}';
|
const url = '{file.file.url}';
|
||||||
"""
|
"""
|
||||||
+ """
|
+ """
|
||||||
const pageNum = document.querySelector('#page_num');
|
var currPage = 1;
|
||||||
const pageCount = document.querySelector('#page_count');
|
var numPages = 0;
|
||||||
const currentPage = document.querySelector('#current_page');
|
var thePDF = null;
|
||||||
const previousPage = document.querySelector('#prev_page');
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
||||||
const nextPage = document.querySelector('#next_page');
|
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.worker.min.js';
|
||||||
const zoomIn = document.querySelector('#zoom_in');
|
const loadingTask = pdfjsLib.getDocument(url);
|
||||||
const zoomOut = document.querySelector('#zoom_out');
|
(async () => {
|
||||||
|
const pdf = await loadingTask.promise;
|
||||||
|
thePDF = pdf;
|
||||||
|
numPages = pdf.numPages;
|
||||||
|
await handlePages(1);
|
||||||
|
|
||||||
const initialState = {
|
async function handlePages(curr) {
|
||||||
pdfDoc: null,
|
const scale = 1.5;
|
||||||
currentPage: 1,
|
const page = await pdf.getPage(curr);
|
||||||
pageCount: 0,
|
const viewport = page.getViewport({ scale });
|
||||||
zoom: 1,
|
// Support HiDPI-screens.
|
||||||
|
const outputScale = window.devicePixelRatio || 1;
|
||||||
|
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
const 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";
|
||||||
|
|
||||||
|
const transform = outputScale !== 1
|
||||||
|
? [outputScale, 0, 0, outputScale, 0, 0]
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const renderContext = {
|
||||||
|
canvasContext: context,
|
||||||
|
transform,
|
||||||
|
viewport,
|
||||||
};
|
};
|
||||||
pdfjsLib
|
page.render(renderContext);
|
||||||
.getDocument(pdf)
|
document.getElementById("pdf").appendChild(canvas);
|
||||||
.promise.then((data) => {
|
|
||||||
initialState.pdfDoc = data;
|
|
||||||
console.log('pdfDocument', initialState.pdfDoc);
|
|
||||||
|
|
||||||
pageCount.textContent = initialState.pdfDoc.numPages;
|
curr++;
|
||||||
|
if (thePDF !== null && curr <= numPages) {
|
||||||
renderPage();
|
await handlePages(curr+1);
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
alert(err.message);
|
|
||||||
});
|
|
||||||
|
|
||||||
const renderPage = () => {
|
|
||||||
// Load the first page.
|
|
||||||
console.log(initialState.pdfDoc, 'pdfDoc');
|
|
||||||
initialState.pdfDoc
|
|
||||||
.getPage(initialState.currentPage)
|
|
||||||
.then((page) => {
|
|
||||||
console.log('page', page);
|
|
||||||
|
|
||||||
const canvas = document.querySelector('#canvas');
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
const viewport = page.getViewport({
|
|
||||||
scale: initialState.zoom,
|
|
||||||
});
|
|
||||||
|
|
||||||
canvas.height = viewport.height;
|
|
||||||
canvas.width = viewport.width;
|
|
||||||
|
|
||||||
// Render the PDF page into the canvas context.
|
|
||||||
const renderCtx = {
|
|
||||||
canvasContext: ctx,
|
|
||||||
viewport: viewport,
|
|
||||||
};
|
|
||||||
|
|
||||||
page.render(renderCtx);
|
|
||||||
|
|
||||||
pageNum.textContent = initialState.currentPage;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const showPrevPage = () => {
|
|
||||||
if (initialState.pdfDoc === null || initialState.currentPage <= 1)
|
|
||||||
return;
|
|
||||||
initialState.currentPage--;
|
|
||||||
// Render the current page.
|
|
||||||
currentPage.value = initialState.currentPage;
|
|
||||||
renderPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
const showNextPage = () => {
|
|
||||||
if (
|
|
||||||
initialState.pdfDoc === null ||
|
|
||||||
initialState.currentPage >= initialState.pdfDoc._pdfInfo.numPages
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
|
|
||||||
initialState.currentPage++;
|
|
||||||
currentPage.value = initialState.currentPage;
|
|
||||||
renderPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Button events.
|
|
||||||
previousPage.addEventListener('click', showPrevPage);
|
|
||||||
nextPage.addEventListener('click', showNextPage);
|
|
||||||
currentPage.addEventListener('keypress', (event) => {
|
|
||||||
if (initialState.pdfDoc === null) return;
|
|
||||||
// Get the key code.
|
|
||||||
const keycode = event.keyCode ? event.keyCode : event.which;
|
|
||||||
|
|
||||||
if (keycode === 13) {
|
|
||||||
// Get the new page number and render it.
|
|
||||||
let desiredPage = currentPage.valueAsNumber;
|
|
||||||
initialState.currentPage = Math.min(
|
|
||||||
Math.max(desiredPage, 1),
|
|
||||||
initialState.pdfDoc._pdfInfo.numPages,
|
|
||||||
);
|
|
||||||
|
|
||||||
currentPage.value = initialState.currentPage;
|
|
||||||
renderPage();
|
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
zoomIn.addEventListener('click', () => {
|
})();
|
||||||
if (initialState.pdfDoc === null) return;
|
</script>
|
||||||
initialState.zoom *= 4 / 3;
|
|
||||||
renderPage();
|
|
||||||
});
|
|
||||||
|
|
||||||
zoomOut.addEventListener('click', () => {
|
|
||||||
if (initialState.pdfDoc === null) return;
|
|
||||||
initialState.zoom *= 2 / 3;
|
|
||||||
renderPage();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
"""
|
"""
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
||||||
169
akarpov/files/previews/application/pdf_controls.py
Normal file
169
akarpov/files/previews/application/pdf_controls.py
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
from akarpov.files.models import File
|
||||||
|
|
||||||
|
|
||||||
|
def view(file: File):
|
||||||
|
static = """
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/web/pdf_viewer.min.css" rel="stylesheet">
|
||||||
|
"""
|
||||||
|
|
||||||
|
content = (
|
||||||
|
"""
|
||||||
|
<header>
|
||||||
|
<div class="col-auto">
|
||||||
|
<ul class="navigation">
|
||||||
|
<li class="navigation__item">
|
||||||
|
<!-- Navigate to the Previous and Next pages -->
|
||||||
|
<a href="#" class="previous round" id="prev_page">
|
||||||
|
<i class="fas fa-arrow-left"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Navigate to a specific page -->
|
||||||
|
<input type="number" value="1" id="current_page" />
|
||||||
|
|
||||||
|
<a href="#" class="next round" id="next_page">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Page Info -->
|
||||||
|
Page
|
||||||
|
<span id="page_num"></span>
|
||||||
|
of
|
||||||
|
<span id="page_count"></span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Zoom In and Out -->
|
||||||
|
<li class="navigation__item">
|
||||||
|
<button class="zoom" id="zoom_in">
|
||||||
|
<i class="fas fa-search-plus"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="zoom" id="zoom_out">
|
||||||
|
<i class="fas fa-search-minus"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Canvas to place the PDF -->
|
||||||
|
<canvas id="canvas" class="canvas__container w-50"></canvas>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
|
||||||
|
<script>
|
||||||
|
"""
|
||||||
|
+ f"""
|
||||||
|
const pdf = '{file.file.url}';
|
||||||
|
"""
|
||||||
|
+ """
|
||||||
|
const pageNum = document.querySelector('#page_num');
|
||||||
|
const pageCount = document.querySelector('#page_count');
|
||||||
|
const currentPage = document.querySelector('#current_page');
|
||||||
|
const previousPage = document.querySelector('#prev_page');
|
||||||
|
const nextPage = document.querySelector('#next_page');
|
||||||
|
const zoomIn = document.querySelector('#zoom_in');
|
||||||
|
const zoomOut = document.querySelector('#zoom_out');
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
pdfDoc: null,
|
||||||
|
currentPage: 1,
|
||||||
|
pageCount: 0,
|
||||||
|
zoom: 1,
|
||||||
|
};
|
||||||
|
pdfjsLib
|
||||||
|
.getDocument(pdf)
|
||||||
|
.promise.then((data) => {
|
||||||
|
initialState.pdfDoc = data;
|
||||||
|
console.log('pdfDocument', initialState.pdfDoc);
|
||||||
|
|
||||||
|
pageCount.textContent = initialState.pdfDoc.numPages;
|
||||||
|
|
||||||
|
renderPage();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
alert(err.message);
|
||||||
|
});
|
||||||
|
|
||||||
|
const renderPage = () => {
|
||||||
|
// Load the first page.
|
||||||
|
console.log(initialState.pdfDoc, 'pdfDoc');
|
||||||
|
initialState.pdfDoc
|
||||||
|
.getPage(initialState.currentPage)
|
||||||
|
.then((page) => {
|
||||||
|
console.log('page', page);
|
||||||
|
|
||||||
|
const canvas = document.querySelector('#canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const viewport = page.getViewport({
|
||||||
|
scale: initialState.zoom,
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.height = viewport.height;
|
||||||
|
canvas.width = viewport.width;
|
||||||
|
|
||||||
|
// Render the PDF page into the canvas context.
|
||||||
|
const renderCtx = {
|
||||||
|
canvasContext: ctx,
|
||||||
|
viewport: viewport,
|
||||||
|
};
|
||||||
|
|
||||||
|
page.render(renderCtx);
|
||||||
|
|
||||||
|
pageNum.textContent = initialState.currentPage;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const showPrevPage = () => {
|
||||||
|
if (initialState.pdfDoc === null || initialState.currentPage <= 1)
|
||||||
|
return;
|
||||||
|
initialState.currentPage--;
|
||||||
|
// Render the current page.
|
||||||
|
currentPage.value = initialState.currentPage;
|
||||||
|
renderPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
const showNextPage = () => {
|
||||||
|
if (
|
||||||
|
initialState.pdfDoc === null ||
|
||||||
|
initialState.currentPage >= initialState.pdfDoc._pdfInfo.numPages
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
|
initialState.currentPage++;
|
||||||
|
currentPage.value = initialState.currentPage;
|
||||||
|
renderPage();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Button events.
|
||||||
|
previousPage.addEventListener('click', showPrevPage);
|
||||||
|
nextPage.addEventListener('click', showNextPage);
|
||||||
|
currentPage.addEventListener('keypress', (event) => {
|
||||||
|
if (initialState.pdfDoc === null) return;
|
||||||
|
// Get the key code.
|
||||||
|
const keycode = event.keyCode ? event.keyCode : event.which;
|
||||||
|
|
||||||
|
if (keycode === 13) {
|
||||||
|
// Get the new page number and render it.
|
||||||
|
let desiredPage = currentPage.valueAsNumber;
|
||||||
|
initialState.currentPage = Math.min(
|
||||||
|
Math.max(desiredPage, 1),
|
||||||
|
initialState.pdfDoc._pdfInfo.numPages,
|
||||||
|
);
|
||||||
|
|
||||||
|
currentPage.value = initialState.currentPage;
|
||||||
|
renderPage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
zoomIn.addEventListener('click', () => {
|
||||||
|
if (initialState.pdfDoc === null) return;
|
||||||
|
initialState.zoom *= 4 / 3;
|
||||||
|
renderPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
zoomOut.addEventListener('click', () => {
|
||||||
|
if (initialState.pdfDoc === null) return;
|
||||||
|
initialState.zoom *= 2 / 3;
|
||||||
|
renderPage();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
"""
|
||||||
|
)
|
||||||
|
|
||||||
|
return static, content
|
||||||
Loading…
Reference in New Issue
Block a user