前端pdf预览、pdfjs的使用

前言

关于前端预览pdf，最简单的方式是使用window.open() 直接在浏览器的新窗口打开就好，浏览器本身也是提供了非常多的功能

但是因为客户的某些需求，不能使用浏览器自身的功能。后来又使用了 https://github.com/gjTool/pdfh5，也挺好用的，操作比较简单。使用了一段时间吧，但是还是由于客户的某些需求，最终还是放弃了。

百度查询了一下可以使用 https://github.com/mozilla/pdf.js 来实现功能自定义。

pdfjs

官方文档、examples、API

https://mozilla.github.io/pdf.js/

安装

npm install pdfjs-dist
1

我的版本是3.0.279，不同版本可能有些不同。如果你是vue2加webpack的项目建议用2.6.347，因为我在老项目中用新版本遇到了各种各样的问题。

加载

<script setup lang="ts">
import { onMounted } from 'vue';
onMounted(async() => {
    const pdfjs = await import('pdfjs-dist/build/pdf.js');
    const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
    pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
    console.log('pdf', pdfjs);
    // 加载pdf文件，本地文件会有跨域问题，使用线上文件
    const url = 'http://....2022-11-07/69c075093c9942dea7dcf86ac691ff9d.pdf';

    pdfjs.getDocument(url)
        .promise.then(pdfDoc => {
            console.log('内容：', pdfDoc, pdfDoc.numPages);
        });
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

必须异步加载，不然会报错。解决方案来源于：https://github.com/mozilla/pdf.js/issues/10478

渲染

每个PDF页面都有自己的视口，它定义了以像素为单位的大小（72DPI）和初始旋转。默认情况下，视口缩放为PDF 的原始大小，但这可以通过修改视口来更改。创建视口时，还将创建一个初始变换矩阵，该矩阵考虑了所需的比例、旋转，并变换坐标系（PDF中的 0，0 点记录在左下角，而画布 0，0 在左上角）。

<template>
    <div>
        <div class="tool-bar">
            <div>{{ pdfParams.pageNumber }} / {{ pdfParams.total }}</div>
            <el-button type="primary" :disabled="pdfParams.pageNumber == pdfParams.total" @click="nextPage">下一页
            </el-button>
            <el-button type="primary" :disabled="pdfParams.pageNumber == 1" @click="prevPage">上一页</el-button>
            <el-button type="primary" @click="rotatePage">旋转</el-button>
            <el-button type="primary" :disabled="pdfParams.scale==5" @click="toBig">放大</el-button>
            <el-button type="primary" :disabled="pdfParams.scale==1" @click="toSmall">缩小</el-button>
        </div>
        <canvas id="pdf-render"></canvas>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';

const pdfParams = reactive({
    pageNumber: 1, // 当前页
    total: 0, // 总页数
    scale: 1, // 缩放
    rotate: 0 // 旋转角度
});

// 不要定义为ref或reactive格式，就定义为普通的变量
let pdfDoc = null;

onMounted(async() => {
    const pdfjs = await import('pdfjs-dist/build/pdf.js');
    const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
    pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
    // 加载pdf文件，本地文件会有跨域问题，下面这个地址是不对的，自行更换
    const url = 'http://y2/2022-11-07/69c075093c9942dea7dcf86ac691ff9d.pdf';

    pdfjs.getDocument(url)
        .promise.then(doc => {
            pdfDoc = doc;
            console.log('内容：', doc, doc.numPages);
            pdfParams.total = doc.numPages;
            getPdfPage(1);
        });
});

// 加载pdf的某一页
const getPdfPage = (number) => {
    pdfDoc.getPage(number).then((page) => {
        console.log('page:', page);
        // 获取视图，并设置缩放
        const viewport = page.getViewport(
            {
                scale: pdfParams.scale, // 缩放
                rotation: pdfParams.rotate // 旋转
            });
        console.log('视图：', viewport);
        const outputScale = window.devicePixelRatio || 1;
        // 获取canvas
        const canvas = document.getElementById('pdf-render');
        const context = canvas.getContext('2d');
        // 设置canvas的宽高
        canvas.width = Math.floor(viewport.width * outputScale);
        canvas.height = Math.floor(viewport.height * outputScale);
        canvas.style.width = Math.floor(viewport.width) + 'px';
        canvas.style.height = Math.floor(viewport.height) + 'px';
        // 渲染pdf
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
};
// 前一页
const prevPage = () => {
    if (pdfParams.pageNumber > 1) {
        pdfParams.pageNumber -= 1;
    } else {
        pdfParams.pageNumber = 1;
    }
    // 重新渲染
    getPdfPage(pdfParams.pageNumber);
};
// 下一页
const nextPage = () => {
    if (pdfParams.pageNumber < pdfParams.total) {
        pdfParams.pageNumber += 1;
    } else {
        pdfParams.pageNumber = pdfParams.total;
    }
    // 重新渲染
    getPdfPage(pdfParams.pageNumber);
};

// 旋转
const rotatePage = () => {
    pdfParams.rotate += 90;
    // 重新渲染
    getPdfPage(pdfParams.pageNumber);
};
// 放大
const toBig = () => {
    if (pdfParams.scale < 5) {
        pdfParams.scale += 0.5;
    } else {
        pdfParams.scale = 5;
    }
    // 重新渲染
    getPdfPage(pdfParams.pageNumber);
};
// 缩小
const toSmall = () => {
    if (pdfParams.scale > 1) {
        pdfParams.scale -= 0.5;
    } else {
        pdfParams.scale = 1;
    }
    // 重新渲染
    getPdfPage(pdfParams.pageNumber);
};
</script>

<style lang="scss" scoped>
.tool-bar {
    position: fixed;
    z-index: 200;
    left: 200px;
}
</style>
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
120
121
122
123
124
125
126
127
128

效果

补充

注意：

可以修改的属性如下图：

1、其他属性都比较好理解，transform 和 viewBox 暂时没有弄明白，不建议修改
2、旋转属性：rotation ，如果使用pdfjs提供的方式进行旋转的话要注意旋转的角度必须是90的整数倍。
3、放大的最大倍数是5被

下载
关于下载的功能我没有写，有需要的可以使用FileSaver.js，基本使用见我的这篇文章：FileSaver.js的简单使用

打印
打印功能有需要的话可以看我的这篇文章：前端使用print.js实现打印