往期回顾：vue3中借助 pdfjs-dist 实现pdf文件展示、文本选中功能及使用过程中部分问题处理

文章目录

vue3中使用 vue-pdf-embed 实现pdf文件预览、翻页、下载等功能
- - 一、安装 `vue-pdf-embed`
    - - 1、安装 `vue-pdf-embed`
    - 二、文件预览
    - - 1、`html` 结构内容
        
        2、`css` 样式
        
        3、`js` 基本预览功能实现
        
        4、获取文件总页数
    - 三、翻页
    - 四、缩放
    - 五、下载
    - 六、打印
    - 七、指定页面跳转
    - 八、项目演示
    - 九、参考资料

一、安装 `vue-pdf-embed`

1、安装 `vue-pdf-embed`

yarn add vue-pdf-embed@1.2.1

注：此处安装版本为 1.2.1，2.x 版本安装的依赖包 pdfjs-dist 版本为 3.x 版本。

注：2024.2.16 更新无需安装 vue3-pdfjs 即可获取文件总页数的方法。

可根据需要安装 yarn add vue3-pdfjs@0.1.6 。

注：此前安装 vue3-pdfjs 是参考了网上的一些教程，主要用于获取文件总页数，后续在 github 上看到 vue-pdf-embed 的作者的留言中发现了新的写法。

参考链接：https://github.com/hrynko/vue-pdf-embed/discussions/166

二、文件预览

1、`html` 结构内容

 1<template>
 2    <div id="vue-pdf-view">
 3        <div id="page-view">
 4            <vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer />
 5        </div>
 6    </div>
 7</template>

参数说明：

source：文档来源（支持 string、object、Uint8Array 类型数据）
page：要显示的页数（如果未指定，则显示所有页）
textLayer：是否应启用文本图层（用于文本选中、复制）

2、`css` 样式

 1<style>
 2#vue-pdf-view {
 3    position: absolute;
 4    left: 50%;
 5    transform: translateX(-50%) scale(1.0);
 6    width: 70%;
 7    height: 100%;
 8    text-align: center;
 9
10    
11    overflow: scroll;
12    
13    overflow-y: hidden;
14    overflow-x: hidden;
15}
16
17#vue-pdf-view::-webkit-scrollbar {
18    width: 8px;
19    height: 8px;
20}
21
22#vue-pdf-view::-webkit-scrollbar-thumb {
23    border-radius: 15px;
24    background-color: #eee;
25}
26
27#vue-pdf-view::-webkit-scrollbar-thumb:hover {
28    background-color: #CBCBFF;
29}
30</style>

注：此处主要是对滚动条的样式进行修改，可自由发挥。

3、`js` 基本预览功能实现

 1import { onMounted, reactive, ref } from 'vue';
 2import VuePdfEmbed from "vue-pdf-embed";
 3
 4import pdfUrl from './2021试卷.pdf';
 5
 6const pdfState = reactive({
 7    pdfSource: {
 8        url: pdfUrl,
 9        cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
10        cMapPacked: true,
11    },
12    
13    pageNum: 1,
14    
15    numPages: 1,
16})

注：

此时已经实现基本的预览功能了(单页)。当 pageNum 的参数为 0 时或不写该参数时展示所有页。
参数 cMapUrl 和 cMapPacked 用于处理一些字体乱码和浏览器控制台关于字体错误的警告。

4、获取文件总页数

在 vue-pdf-embed@2.x 版本中，更新了新的方法：

 1<script setup>
 2import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
 3
 4const { doc } = useVuePdfEmbed({
 5  source: '<PDF_URL>',
 6})
 7</script>

可以借助 useVuePdfEmbed 方法来获取文件相关的信息。

方法一： vue-pdf-embed@1.2.1 版本获取总页数方法：

 1`import VuePdfEmbed from "vue-pdf-embed";
 2
 3onMounted(async () => {
 4    const doc = await VuePdfEmbed.getDocument(pdfState.source).promise
 5    
 6    console.log(doc.numPages);
 7});` 
 8
 9*   1
10*   2
11*   3
12*   4
13*   5
14*   6
15*   7
16

注：在 vue-pdf-embed@2.x 版本中，该写法无效。

方法二： 如果安装了 vue3-pdfjs，则使用以下方法获取总页数：

 1`import { onMounted, reactive, ref } from 'vue';
 2import { createLoadingTask } from 'vue3-pdfjs/esm';
 3
 4onMounted(() => {
 5    const loadingTask = createLoadingTask(pdfState.pdfSource);
 6    loadingTask.promise.then((pdf) => {
 7        
 8        pdfState.numPages = pdf.numPages;
 9    });
10});` 
11
12*   1
13*   2
14*   3
15*   4
16*   5
17*   6
18*   7
19*   8
20*   9
21*   10
22

获取总页数后可用于遍历展示多页：

 1`<vue-pdf-embed :source="pdfState.pdfSource"  v-for="page in pdfState.numPages" :key="page" :page="pdfState.pageNum" textLayer/>` 
 2
 3*   1
 4

参考资料：

更多关于 vue-pdf-embed 2.x 版本的信息可参考：https://www.npmjs.com/package/vue-pdf-embed/v/2.0.0
更多关于 vue3-pdfjs 的用法可参考：https://www.npmjs.com/package/vue3-pdfjs

三、翻页

在文件基本预览的基础之上追加相应功能的实现：

html 结构：

 1`<vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer />
 2<button @click="pageUp">上一页</button>
 3<button @click="pageDown">下一页</button>` 
 4
 5*   1
 6*   2
 7*   3
 8

js 功能实现：

 1`<script setup>
 2
 3function pageUp() {
 4    if (pdfState.pageNum >= 1) {
 5        pdfState.pageNum--;
 6    }
 7    
 8    if (pdfState.pageNum == 0) {
 9        pdfState.pageNum = pdfState.numPages;
10    }
11}
12
13function pageDown() {
14    if (pdfState.pageNum <= pdfState.numPages) {
15        pdfState.pageNum++;
16    }
17    
18    if (pdfState.pageNum > pdfState.numPages) {
19        pdfState.pageNum = 1;
20    }
21}
22</script>` 
23
24*   1
25*   2
26*   3
27*   4
28*   5
29*   6
30*   7
31*   8
32*   9
33*   10
34*   11
35*   12
36*   13
37*   14
38*   15
39*   16
40*   17
41*   18
42*   19
43*   20
44*   21
45*   22
46*   23
47

四、缩放

html 结构：

 1``<div id="vue-pdf-view">
 2    <div id="page-view" :style="{
 3        position: 'absolute',
 4        top: '50%',
 5        left: '50%',
 6        transform: `translate(-50%,-50%) scale(${scaleData})`,
 7        width: '100%',
 8        height: `${pageHeight}`,
 9    }">
10        <vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer/>
11    </div>
12</div>
13<button @click="zoomIn">放大</button>
14<button @click="zoomOut">缩小</button>
15<button @click="pageRest">重置缩放</button>`` 
16
17*   1
18*   2
19*   3
20*   4
21*   5
22*   6
23*   7
24*   8
25*   9
26*   10
27*   11
28*   12
29*   13
30*   14
31*   15
32

js 功能实现：

 1`const scaleData = ref(1.0);
 2const pageHeight = ref('100%');
 3
 4function zoomIn() {
 5    scaleData.value += 0.1;
 6    pageHeight.value = (parseInt(pageHeight.value) - 5.0) + '%';
 7}
 8
 9function zoomOut() {
10    scaleData.value -= 0.1;
11    pageHeight.value = (parseInt(pageHeight.value) + 5.0) + '%';
12}
13
14function pageRest() {
15    scaleData.value = 1.0;
16    pageHeight.value = '100%';
17}` 
18
19![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
20
21*   1
22*   2
23*   3
24*   4
25*   5
26*   6
27*   7
28*   8
29*   9
30*   10
31*   11
32*   12
33*   13
34*   14
35*   15
36*   16
37*   17
38*   18
39

说明：

此处控制的是父容器的缩放，因为在使用 vue-pdf-embed 组件的 scale 参数时发现无法实现动态更改，且 width 参数无法设置成百分比的形式，所以采用修改父容器的方案实现。

在实现放大父容器的过程中发现，容器放大后，高度也应该做相应的修改，否则文件展示会出现展示不全的情况。

注意：如果父容器设置了宽度，此时追加 scale 参数后会出现文件模糊的情况。

五、下载

html 结构：

 1`<vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer ref="vuePdfRef"/>
 2<button @click="PDFDownload">文件下载</button>` 
 3
 4*   1
 5*   2
 6

js 功能实现：

 1`const vuePdfRef = ref(null);
 2
 3function getPDFFileName() {
 4    const last_index = pdfState.pdfSource.url.lastIndexOf('/');
 5    return pdfState.pdfSource.url.slice(last_index + 1);
 6}
 7
 8function PDFDownload() {
 9    vuePdfRef.value.download(getPDFFileName());
10}` 
11
12*   1
13*   2
14*   3
15*   4
16*   5
17*   6
18*   7
19*   8
20*   9
21*   10
22*   11
23*   12
24

说明：download 方法可传递一个字符串参数作为文件名。

六、打印

html 结构：

 1`<vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer ref="vuePdfRef"/>
 2<button @click="PDFPrint">打印</button>` 
 3
 4*   1
 5*   2
 6

js 功能实现：

 1`const vuePdfRef = ref(null);
 2
 3function getPDFFileName() {
 4    const last_index = pdfState.pdfSource.url.lastIndexOf('/');
 5    return pdfState.pdfSource.url.slice(last_index + 1);
 6}
 7
 8function PDFPrint() {
 9    vuePdfRef.value.print(300, getPDFFileName(), true);
10}` 
11
12*   1
13*   2
14*   3
15*   4
16*   5
17*   6
18*   7
19*   8
20*   9
21*   10
22*   11
23*   12
24

参数说明：

dpi：打印分辨率，默认值 300
filename：文件名
allPages：是否打印所有页，默认值 false

注意：

文件打印时出现空白页，起初以为是组件本身的问题，后来发现可能是pdf文件的问题。

修改测试文件：

 1`const pdfState = reactive({
 2    pdfSource: {
 3        url: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
 4        ...
 5    },
 6    ...
 7})` 
 8
 9*   1
10*   2
11*   3
12*   4
13*   5
14*   6
15*   7
16

测试后发现并没有出现空白页，因此推测是文件本身的问题。可能需要使用其他方法来完善该功能或是弹出打印对话框时选择——仅奇数页。

七、指定页面跳转

html 结构：

 1`<vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer ref="vuePdfRef" />
 2<input type="number" @keyup.enter="jumpToPage" v-model="jumpPage">` 
 3
 4*   1
 5*   2
 6

js 功能实现：

 1 `const jumpPage = ref(1);
 2
 3function jumpToPage() {
 4    if (jumpPage.value <= pdfState.numPages && jumpPage.value > 0) {
 5        pdfState.pageNum = jumpPage.value;
 6    }
 7    else {
 8        console.log('--指定页面不存在--');
 9    }
10}` 
11
12*   1
13*   2
14*   3
15*   4
16*   5
17*   6
18*   7
19*   8
20*   9
21*   10
22*   11
23

八、项目演示

九、参考资料

vue-pdf-embed 官方资料

功能实现参考链接(转载)

问题参考资料

文章目录

一、安装 vue-pdf-embed

1、安装 vue-pdf-embed

二、文件预览

1、html 结构内容

2、css 样式

3、js 基本预览功能实现

4、获取文件总页数

三、翻页

四、缩放

五、下载

六、打印

七、指定页面跳转

八、项目演示

九、参考资料

一、安装 `vue-pdf-embed`

1、安装 `vue-pdf-embed`

1、`html` 结构内容

2、`css` 样式

3、`js` 基本预览功能实现