html展示pdf
本文以html + js为例，需自行下载pdfjs-dist插件 npm i pdfjs-dist@2.11.338
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用教程</title>
</head>
<body>
<div class="detail">
<div id="pdf-container" style="width: 600px; height: 500px;"></div>
</div>
</body>
</html>
<script src="/js/pdfjs-dist/build/pdf.js"></script>
<script>
// xx.html?name=demo.pdf
/* 获取地址栏中传递的字段 */
function getQueryVariable(variable) {
const query = window.location.search.substring(1);
const vars = query.split('&');
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) === variable) {
return decodeURIComponent(pair[1]);
}
}
return null;
}
// 获取传递的 name 属性值
let url = getQueryVariable('name');
// 如果没有通过查询参数传递，尝试从 URL 的 hash 部分获取
if (!url) {
url = window.location.hash.slice(1);
}
// 如果仍然没有获取到，使用默认值或提示错误
if (!url) {
console.error('PDF URL not found.');
}
// 直接从这里CV就行
let resUrl = `/tutorial/${url}`
pdfjsLib.getDocument(resUrl).promise.then(function (pdf) {
const numPages = pdf.numPages;
const container = document.getElementById('pdf-container');
for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
pdf.getPage(pageNumber).then(function (page) {
const scale = 1.5;
const viewport = page.getViewport({scale: scale});
const canvas = document.createElement('canvas');
canvas.className = 'pdf-page';
canvas.width = viewport.width;
canvas.height = viewport.height;
const context = canvas.getContext('2d');
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
container.appendChild(canvas);
});
}
}).catch(function (error) {
console.error('Error loading PDF:', error);
});
</script>
<style>
.detail {
width: calc(100vw - 40px);
height: 100vh;
position: relative;
}
</style>
原文地址：https://blog.csdn.net/m0_74149462/article/details/143438010
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！