pdfjs
Published
2023-04-02
浏览次数 : 92
<?php
/**
* this file is for display the pdf catalog with pdf.js
*
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浙江景祥空调设备有限公司画册</title>
<meta name="description" content="浙江景祥专业生产换热器和铜配件" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/vendor/all.min.css">
<style>
.top-bar {
background-color: #333;
color: #fff;
padding: 1rem;
}
.btn {
background: coral;
color: #fff;
border: none;
outline: none;
cursor: pointer;
padding: 0.7rem 2rem;
}
.btn:hover {
opacity: 0.9;
}
.page-info {
margin-left: 1rem;
}
.error {
background-color: orangered;
color: #fff;
padding: 1rem;
}
/* Make the canvas responsive */
canvas {
max-width: 100%;
height: auto;
width: auto\9; /* IE8 and below */
}
/* Adjust font sizes based on screen size */
@media screen and (max-width: 767px) {
.top-bar {
padding: 0.5rem;
}
.btn {
font-size: 0.8rem;
padding: 0.5rem 1rem;
}
.page-info {
font-size: 0.8rem;
}
.error {
font-size: 0.8rem;
padding: 0.5rem;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.top-bar {
padding: 0.7rem;
}
.btn {
font-size: 1rem;
padding: 0.7rem 1.5rem;
}
.page-info {
font-size: 1rem;
}
.error {
font-size: 1rem;
padding: 0.7rem;
}
}
@media screen and (min-width: 992px) {
.top-bar {
padding: 1rem;
}
.btn {
font-size: 1.2rem;
padding: 0.7rem 2rem;
}
.page-info {
font-size: 1.2rem;
}
.error {
font-size: 1.2rem;
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="top-bar">
<button id="prev-page" class="btn"><i class="fas fa-arrow-circle-left"></i>上一页</button>
<button id="next-page" class="btn">下一页<i class="fas fa-arrow-circle-right"></i></button>
<span class="page-info">Page <span id="page-num"></span> of <span id="page-count"></span></span>
<button id="scale-in">放大</button>
<button id="scale-out">缩小</button>
</div>
<div id="loading" style="display: none;">
<!-- <h2 style="color:red">内容正在加载预计20秒时间请稍后，加载一次后面每次秒开.</h2> -->
<img src="<?php echo get_template_directory_uri() . '/img/loading.gif' ?>" alt="Loading icon">
</div>
<canvas id="pdf-render"></canvas>
<script src="<?php bloginfo('template_url'); ?>/js/pdf.js"></script>
</body>
<!-- send the script here -->
<script type="text/javascript">
<?php
$absolute_path = get_post_meta( get_the_ID(),'catalog_pdf',true );
$relative_path = str_replace(site_url(), '', $absolute_path);
$relative_path = '../..' . $relative_path;
?>
const url = `<?php echo $relative_path; ?>`;
let pdfDoc = null,
pageNum = 1,
pageIsRendering = false,
pageNumIsPending = null;
const canvas = document.querySelector('#pdf-render'),
ctx = canvas.getContext('2d');
const renderPage = (num, scale) => {
pageIsRendering = true;
const loadingElement = document.getElementById('loading');
loadingElement.style.display = 'block';
pdfDoc.getPage(num).then(page => {
const viewport = page.getViewport({ scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: ctx,
viewport,
disableAutoFetch: true, // Disable automatic fetching of pages
disableStream: true, // Disable streaming
};
page.render(renderContext).promise.then(() => {
pageIsRendering = false;
if (pageNumIsPending !== null) {
renderPage(pageNumIsPending, scale);
pageNumIsPending = null;
}
loadingElement.style.display = 'none'; // Hide loading element when done
}).catch(error => {
console.error('Error rendering page:', error);
});
document.querySelector('#page-num').textContent = num;
});
};
const queueRenderPage = (num, scale) => {
if (pageIsRendering) {
pageNumIsPending = num;
} else {
renderPage(num, scale);
}
};
const showPrevPage = () => {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum, scale);
};
const showNextPage = () => {
if (pageNum >= pdfDoc.numPages) {
pageNum = 1; // Set the page number to 1
} else {
pageNum++;
}
queueRenderPage(pageNum, scale);
};
const initPdfViewer = (url, scale) => {
const loadingElement = document.getElementById('loading');
loadingElement.style.display = 'block';
pdfjsLib.GlobalWorkerOptions.workerSrc = '<?php bloginfo('template_url'); ?>/js/pdf.worker.js';
pdfjsLib.getDocument(url, {
worker: true,
workerSrc: 'pdf.worker.js',
disableAutoFetch: true, // Disable automatic fetching of pages
disableStream: true, // Disable streaming
}).promise.then(pdfDoc_ => {
pdfDoc = pdfDoc_;
document.querySelector('#page-count').textContent = pdfDoc.numPages;
renderPage(pageNum, scale);
loadingElement.style.display = 'none'; // Hide loading element when done
}).catch(err => {
const div = document.createElement('div');
div.className = 'error';
div.appendChild(document.createTextNode(err.message));
document.querySelector('body').insertBefore(div, canvas);
document.querySelector('.top-bar').style.display = 'none';
});
};
var scale = 0.5;
initPdfViewer(url, scale);
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
document.querySelector('#next-page').addEventListener('click', showNextPage);
let startPointX = 0;
let endPointX = 0;
//支持触屏换页， 勿删
// const handleTouchStart = (e) => {
// startPointX = e.touches[0].clientX;
// };
// const handleTouchEnd = (e) => {
// endPointX = e.changedTouches[0].clientX;
// if (startPointX - endPointX > 50) {
// showNextPage();
// } else if (endPointX - startPointX > 50) {
// showPrevPage();
// }
// };
// canvas.addEventListener('touchstart', handleTouchStart);
// canvas.addEventListener('touchend', handleTouchEnd);
const scaleInButton = document.querySelector('#scale-in');
const scaleOutButton = document.querySelector('#scale-out');
const handleScaleIn = () => {
scale += 0.1;
renderPage(pageNum, scale);
};
const handleScaleOut = () => {
if (scale <= 0.2) {
return;
}
scale -= 0.1;
renderPage(pageNum, scale);
};
scaleInButton.addEventListener('click', handleScaleIn);
scaleOutButton.addEventListener('click', handleScaleOut);
</script>
</html>- 标签1
- 标签1
- 标签1