sanspie/akarpov
1
1
Fork 0
mirror of https://github.com/Alexander-D-Karpov/akarpov synced 2024-11-14 09:56:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed pdf

Browse Source
This commit is contained in:
Alexander Karpov 2023-04-18 12:56:50 +03:00
parent 08cfbc211e
commit 5f2c738373
2 changed files with 230 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
akarpov/files/previews/application/pdf.py
View File

@ -3,167 +3,82 @@
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>
"""
) )
return static, content return static, content

169
akarpov/files/previews/application/pdf_controls.py Normal file
View 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