html5 pdf.js 阅读器,JS实现PDF阅读器

实现效果

安装依赖

npm install pdfjs-dist --save

引入依赖

href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"

rel="stylesheet"

/>

实现代码

index.html

Document

href="https://cdn.bootcdn.net/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;