admin管理员组文章数量:1649156
实现效果
安装依赖
npm install pdfjs-dist --save
引入依赖
href="https://cdn.bootcdn/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
实现代码
index.html
Documenthref="https://cdn.bootcdn/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
上一页
下一页
页码 总共
js/main.js
const url = "docs/sample.pdf";
// 指定worker文件
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
let pdfDoc = null,
pageNum = 1,
// 是否正在渲染
pageIsRendering = false,
// 等待渲染的页面
pageNumIsPending = null;
const scale = 1.5,
canvas = document.querySelector("#pdf-render"),
ctx = canvas.getContext("2d");
// 渲染指定页码的pdf
const renderPage = (num) => {
// 渲染开始
pageIsRendering = true;
// 获取指定页码pdf pdfDoc.getPage(num)
pdfDoc.getPage(num).then((page) => {
// 设置缩放比例
const viewport = page.getViewport({ scale });
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染上下文
const renderCtx = {
canvasContext: ctx,
viewport,
};
page.render(renderCtx).promise.then(() => {
// 渲染结束
pageIsRendering = false;
// 判断是否有等待渲染页面
if (pageNumIsPending !== null) {
renderPage(pageNumIsPending);
pageNumIsPending = null;
}
});
// 输出当前页码
document.querySelector("#page-num").textContent = num;
});
};
// 用于切换页面
const queueRenderPage = (num) => {
if (pageIsRendering) {
pageNumIsPending = num;
} else {
renderPage(num);
}
};
// 显示上一页
const showPrevPage = () => {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
};
// 显示下一页
const showNextPage = () => {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
};
// 获得PDF pdfjsLib在全局变量中,_pdfDoc是读取的结果,将它赋值给全局变量pdfDoc
pdfjsLib
.getDocument(url)
.promise.then((_pdfDoc) => {
pdfDoc = _pdfDoc;
console.log(pdfDoc);
// 显示pdf页数 pdfDoc.numPages
document.querySelector("#page-count").textContent = pdfDoc.numPages;
// 渲染pdf首页
renderPage(pageNum);
})
.catch(() => {
// 显示错误
const div = document.createElement("div");
div.className = "error";
div.appendChild(document.createTextNode("加载失败了"));
// 在canvas前面插入结点
document.querySelector("body").insertBefore(div, canvas);
// 隐藏顶部栏
document.querySelector(".top-bar").style.display = "none";
});
// 按钮事件
document.querySelector("#prev-page").addEventListener("click", showPrevPage);
document.querySelector("#next-page").onclick = showNextPage;
版权声明:本文标题:html5 pdf.js 阅读器,JS实现PDF阅读器 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729505694a1203601.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论