抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

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

developfrontend

发布于：2021年9月6日

次浏览

字数：1.8k 字

时长：10 分钟

pdf.js 使用

介绍

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

创建 HTML 且添加引用

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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 查看器:

1
2
3
<div id="my_pdf_viewer">
      
</div>

JavaScript PDF 查看器的核心是 HTML5 元素。我们将在其中渲染 PDF 文件的页面。因此，在

元素中添加以下代码：

1
2
3
<div id="canvas_container">
    <canvas id="pdf_renderer"></canvas>
</div>

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

1
2
3
4
5
<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>

添加放大缩小显示按钮

1
2
3
4
<div id="zoom_controls">  
    <button id="zoom_in">+</button>
    <button id="zoom_out">-</button>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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 地址

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

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

加载 PDF 文件

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

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
        });
    });
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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 静态文件服务器：

1
npm install anywhere -g

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

可以完善下样式：

1
2
3
4
5
6
7
8
#canvas_container{
            width: 800px;
            height: 450px;
            overflow: auto;
            background: #333;
            text-align: center;
            border: solid 3px;
        }

操控事件

← 前一页：

1
2
3
4
5
6
7
8
9
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();
});

→ 后一页：

1
2
3
4
5
6
7
8
9
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();
});

↪ 页面跳转：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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();
        }
    }
});

🔍 放大：

1
2
3
4
5
6
7
document.getElementById('zoom_in')
    .addEventListener('click', (e) => {
    if(myState.pdf == null) return;
    myState.zoom += 0.5;
 
    render();
});

🔍 缩小：

1
2
3
4
5
6
7
document.getElementById('zoom_out')
    .addEventListener('click', (e) => {
    if(myState.pdf == null) return;
    myState.zoom -= 0.5;
     
    render();
});

最终完成的 HTML 页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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>

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://blog.zerow.cn/develop/frontend/d7cf49aa.html

更新于：2021年9月6日

PDF

评论