使用pdf.js在线查看PDF文件

发布于：2021年9月6日

pdf.js 使用

介绍

pdf.js 是一款开源的 pdf 文档解析插件，可以在 HTML 中查看 PDF 文件。

创建 HTML 且添加引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pdf.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>
<body>

</body>
</html>

❓ HTML 页面设计

https://code.tutsplus.com/tutorials/how-to-create-a-pdf-viewer-in-javascript--cms-32505

创建一个 DIV 容器，用来放置 PDF 查看器:

<div id="my_pdf_viewer">

</div>

JavaScript PDF 查看器的核心是 HTML5

元素中添加以下代码：

<div id="canvas_container">
    <canvas id="pdf_renderer"></canvas>
</div>

添加页面控制按钮，可以往前后翻页，还可以跳转到指定页面

<div id="navigation_controls">
    <button id="go_previous">Previous</button>
    <input id="current_page" value="1" type="number"/>
    <button id="go_next">Next</button>
</div>

添加放大缩小显示按钮

<div id="zoom_controls">  
    <button id="zoom_in">+</button>
    <button id="zoom_out">-</button>
</div>

最后显示一个完整的 HTML 页面：

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>pdf.js Demo</title>
</head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <div id="navigation_controls">
            <button id="go_previous">Previous</button>
            <input id="current_page" value="1" type="number"/>
            <button id="go_next">Next</button>
        </div>

        <div id="zoom_controls">  
            <button id="zoom_in">+</button>
            <button id="zoom_out">-</button>
        </div>
    </div>
</body>
</html>

添加 pdf.js 引用

pdf.js CDN 地址

cdnjs:https://cdnjs.com/libraries/pdf.js
jsdelivr: https://www.jsdelivr.com/package/npm/pdfjs-dist

我们在以上 HTML 页面中将它引入进来：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>

加载 PDF 文件

初始化，在当前项目根目录放置一个 PDF 文件：test.pdf

<script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }

        pdfjsLib.getDocument('./test.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });
</script>

这里有一个 render渲染页面的函数：

function render() {
    myState.pdf.getPage(myState.currentPage).then((page) => {

        var canvas = document.getElementById("pdf_renderer");
        var ctx = canvas.getContext('2d');

        var viewport = page.getViewport(myState.zoom);

        canvas.width = viewport.width;
        canvas.height = viewport.height;

        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
    });
}

这样一个完整的页面就是：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>pdf.js Demo</title>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
  </script>
</head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <div id="navigation_controls">
            <button id="go_previous">Previous</button>
            <input id="current_page" value="1" type="number"/>
            <button id="go_next">Next</button>
        </div>

        <div id="zoom_controls">  
            <button id="zoom_in">+</button>
            <button id="zoom_out">-</button>
        </div>
    </div>

    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }

        pdfjsLib.getDocument('./test.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {

                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');

                var viewport = page.getViewport(myState.zoom);

                canvas.width = viewport.width;
                canvas.height = viewport.height;

                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }
    </script>
</body>
</html>

安装 Anywhere 静态文件服务器：

npm install anywhere -g

安装完成后在当前项目目录执行 anywhere 即可启动服务，显示出 PDF 页面。

可以完善下样式：

#canvas_container{
            width: 800px;
            height: 450px;
            overflow: auto;
            background: #333;
            text-align: center;
            border: solid 3px;
        }

操控事件

← 前一页：

document.getElementById('go_previous')
    .addEventListener('click', (e) => {
    if(myState.pdf == null|| myState.currentPage == 1) 
    return;

    myState.currentPage -= 1;
    document.getElementById("current_page").value = myState.currentPage;
    render();
});

→ 后一页：

document.getElementById('go_next')
    .addEventListener('click', (e) => {
    if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
    return;

    myState.currentPage += 1;
    document.getElementById("current_page").value = myState.currentPage;
    render();
});

↪ 页面跳转：

document.getElementById('current_page')
    .addEventListener('keypress', (e) => {
    if(myState.pdf == null) return;

    // Get key code
    var code = (e.keyCode ? e.keyCode : e.which);

    // If key code matches that of the Enter key
    if(code == 13) {
        var desiredPage = document.getElementById('current_page').valueAsNumber;

        if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
            myState.currentPage = desiredPage;
            document.getElementById("current_page").value = desiredPage;
            render();
        }
    }
});

🔍 放大：

document.getElementById('zoom_in')
    .addEventListener('click', (e) => {
    if(myState.pdf == null) return;
    myState.zoom += 0.5;

    render();
});

🔍 缩小：

document.getElementById('zoom_out')
    .addEventListener('click', (e) => {
    if(myState.pdf == null) return;
    myState.zoom -= 0.5;

    render();
});

最终完成的 HTML 页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pdf.js Demo</title>
    <style>
        #canvas_container{
            width: 800px;
            height: 450px;
            overflow: auto;
            background: #333;
            text-align: center;
            border: solid 3px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>

<body>
    <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <div id="navigation_controls">
            <button id="go_previous">Previous</button>
            <input id="current_page" value="1" type="number" style='width:80px'/>
            <button id="go_next">Next</button>
        </div>

        <div id="zoom_controls">
            <button id="zoom_in">+</button>
            <button id="zoom_out">-</button>
        </div>
    </div>

    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }

        pdfjsLib.getDocument('./test.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();

        });

//#region Event
        document.getElementById('go_previous').addEventListener('click',(e)=>{
            if(myState.pdf==null || myState.currentPage==1)
            return;

            myState.currentPage-=1;
            document.getElementById('current_page').value=myState.currentPage;
            render();
        })

        document.getElementById('go_next').addEventListener('click',(e)=>{
            if(myState.pdf==null || myState.currentPage>myState.pdf._pdfInfo.numPages)
            return;

            myState.currentPage+=1;
            document.getElementById('current_page').value=myState.currentPage;
            render();
        })

        document.getElementById('current_page').addEventListener('keypress',(e)=>{
            if(myState.pdf==null)return;

            var code=(e.keyCode?e.keyCode:e.which);
            if(code==13){
                var desiredPage=document.getElementById('current_page').valueAsNumber;
                if(desiredPage>=1 && desiredPage<=myState.pdf._pdfInfo.numPages){
                    myState.currentPage=desiredPage;
                    render();
                }
            }
        })

        document.getElementById('zoom_in').addEventListener('click',(e)=>{
            if(myState.pdf==null || myState.zoom>=3)return;

            myState.zoom+=0.5;
            render();
        })

        document.getElementById('zoom_out').addEventListener('click',(e)=>{
            if(myState.pdf==null || myState.zoom<=0.5)return;

            myState.zoom-=0.5;
            render();
        })
//#endregion
        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {

                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');

                var viewport = page.getViewport(myState.zoom);

                canvas.width = viewport.width;
                canvas.height = viewport.height;

                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }
    </script>
</body>

</html>