Инструкция
- В том месте, где должен отображаться PDF создайте HDML блок "Т123"
- Нажмите кнопку "Контент" в html блоке
- Скопируйте и вставьте туда код модификации
- В коде найдите элемент с «id=’pdf-link’» и вместо фразы «ССЫЛКА НА ВАШ ДОКУМЕНТ» пропишите сслыку на ваш PDF
- Ссылку на ваш PDF документ для тильды можно получить, воспользовавшись нашим сервисом (сервис в разработке)
- Так же в коде вы можете полностью стилизовать отображение документа и кнопки управления
- Сохраните изменения и опубликуйте страницу
Демо
<style>
.pdf-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 10px 30px 10px;
background-color: white; /* Цвет фона за PDF документом */
box-sizing: border-box;
}
#pdf-canvas {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Фоновая тень PDF */
max-width: 1000px; /* Максимальная ширина PDF на ПК */
width: 100%;
height: auto;
}
#prev, #next, #zoom-in, #zoom-out, #download-pdf {
display: flex;
align-items: center;
justify-content: center;
outline: none;
border-none;
border-radius: 30px; /* Радиус скругления границы кнопок управления */
background-color: #313131; /* Фоновый цвет кнопок управления */
margin-right: 10px; /* Отступ между кнопоками управления */
width: 36px;
height: 36px;
}
.controls rect, .controls path {
fill: white; /* Цвет элементов в кнопках управления */
}
.controls {
display: flex;
justify-content: center;
margin-bottom: 10px;
position: sticky;
top: 10px;
}
.controls div:hover {
cursor: pointer;
transform: scale(1.1);
}
@media screen and (max-width: 480px){
#zoom-in, #zoom-out {
display: none;
}
.controls {
position: absolute;
top: auto;
bottom: 0;
}
}
</style>
<a id='pdf-link' href='ССЫЛКА НА ВАШ ДОКУМЕНТ' style='display: none' target='blank' download></a>
<div class="pdf-container">
<div class="controls">
<div id="prev" style="font-size: 24px; color: white">
<svg
width="26"
height="26"
viewBox="0 0 216 156"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 90.9904C12.5 85.2169 12.5 70.7831 22.5 65.0096L94.5 23.4404C104.5 17.6669 117 24.8838 117 36.4308L117 119.569C117 131.116 104.5 138.333 94.5 132.56L22.5 90.9904Z"
fill="#D9D9D9"
/>
<rect x="95" y="54" width="121" height="48" rx="24" fill="#D9D9D9" />
</svg>
</div>
<div id="next">
<svg
width="26"
height="26"
viewBox="0 0 216 156"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M193.5 65.0096C203.5 70.7831 203.5 85.2169 193.5 90.9904L121.5 132.56C111.5 138.333 99 131.116 99 119.569L99 36.4308C99 24.8838 111.5 17.6669 121.5 23.4404L193.5 65.0096Z"
fill="#D9D9D9"
/>
<rect
x="121"
y="102"
width="121"
height="48"
rx="24"
transform="rotate(-180 121 102)"
fill="#D9D9D9"
/>
</svg>
</div>
<div id="zoom-in">
<svg
width="26"
height="26"
viewBox="0 0 201 201"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="201"
y="125"
width="201"
height="48"
rx="24"
transform="rotate(-180 201 125)"
fill="#D9D9D9"
/>
<rect
x="77"
y="201"
width="201"
height="48"
rx="24"
transform="rotate(-90 77 201)"
fill="#D9D9D9"
/>
</svg>
</div>
<div id="zoom-out">
<svg
width="26"
height="26"
viewBox="0 0 201 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="201"
y="48"
width="201"
height="48"
rx="24"
transform="rotate(-180 201 48)"
fill="#D9D9D9"
/>
</svg>
</div>
<div id="download-pdf">
<svg
width="26"
height="26"
viewBox="0 0 156 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M90.5987 173.502C84.6892 182.648 71.3108 182.648 65.4012 173.502L25.4025 111.599C18.9533 101.618 26.118 88.4583 38.0012 88.4583L117.999 88.4583C129.882 88.4583 137.047 101.618 130.598 111.599L90.5987 173.502Z"
fill="#D9D9D9"
/>
<rect
x="54"
y="108.117"
width="108.116"
height="48"
rx="24"
transform="rotate(-90 54 108.117)"
fill="#D9D9D9"
/>
<rect x="23" y="185" width="113" height="15" rx="7.5" fill="#D9D9D9" />
</svg>
</div>
</div>
<canvas id="pdf-canvas"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script>
const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');
const pdfLinkElement = document.getElementById('pdf-link');
const pdfUrl = pdfLinkElement.href;
let pdfDoc = null;
let currentPage = 1;
let scaleFactor = 5;
const pdfContainer = document.querySelector('.pdf-container');
const pdfCanvas = document.getElementById('pdf-canvas');
pdfjsLib.getDocument(pdfUrl).promise.then((pdf) => {
pdfDoc = pdf;
renderPage(currentPage);
}).catch((error) => {
console.error('Ошибка загрузки PDF:', error);
});
function renderPage(pageNum) {
pdfDoc.getPage(pageNum).then((page) => {
const viewport = page.getViewport({ scale: scaleFactor });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: ctx,
viewport: viewport,
};
page.render(renderContext);
});
}
document.getElementById('next').addEventListener('click', () => {
if (currentPage < pdfDoc.numPages) {
currentPage++;
renderPage(currentPage);
}
});
document.getElementById('prev').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
});
document.getElementById('zoom-in').addEventListener('click', () => {
scaleFactor += 0.1;
const currentMaxWidth = parseInt(getComputedStyle(pdfCanvas).maxWidth);
pdfCanvas.style.maxWidth = `${currentMaxWidth + 50}px`;
renderPage(currentPage);
});
document.getElementById('zoom-out').addEventListener('click', () => {
scaleFactor = Math.max(0.1, scaleFactor - 0.1);
const currentMaxWidth = parseInt(getComputedStyle(pdfCanvas).maxWidth);
if (currentMaxWidth > 50) {
pdfCanvas.style.maxWidth = `${currentMaxWidth - 50}px`;
}
renderPage(currentPage);
});
document.getElementById('download-pdf').addEventListener('click', () => {
document.getElementById('pdf-link').click();
});
</script>
