vue3中使用 vue-pdf-embed 实现pdf文件预览、翻页、下载等功能

一、安装 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 的作者的留言中发现了新的写法。

二、文件预览

1、html 结构内容 

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

参数说明：

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

2、css 样式

<style>
#vue-pdf-view {
          
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(1.0);
    width: 70%;
    height: 100%;
    text-align: center;

    /* 内容溢出显示滚动条 */
    overflow: scroll;
    /* 隐藏x、y轴滚动条 */
    overflow-y: hidden;
    overflow-x: hidden;
}

/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
          
    width: 8px;
    height: 8px;
}

/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
          
    border-radius: 15px;
    background-color: #eee;
}

/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
          
    background-color: #CBCBFF;
}
</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.

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

3、js 基本预览功能实现

import {
           onMounted, reactive, ref } from 'vue';
import VuePdfEmbed from "vue-pdf-embed";
// 导入自己的文件
import pdfUrl from './2021试卷.pdf';

const pdfState = reactive({
          
    pdfSource: {