Vue3实现PDF文件预览（低版本浏览器兼容）

原创

已于 2024-11-20 09:36:47 修改 · 1w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#pdf

于 2024-01-14 15:22:08 首次发布

前言：
最近和小伙伴们一起合作完成一个企业级知识库项目，其中一个功能就是后端把所有格式的文件转换为PDF，前端实现渲染PDF文件从而实现预览，干了整整一周(考虑到低版本浏览器的兼容)，试用了几种方案（iframe预览已被废弃，不适用本项目，想了解的同学自行搜索），终于实现了这个功能。

方案：Vue3+pdfjs-dist+canvas

1.pdfjs-dist展示PDF文件的原理解释

pdfjs-dist展示pdf文档的原理，实际上是将pdf中的内容渲染到解析，然后渲染到 canvas 中进行展示，因此我们使用pdfjs渲染出来的pdf文件，实际上是一张张canvas图片。

2.安装pdfjs-dist

pdfjs-dist下载官网

建议安装： "pdfjs-dist": "^2.12.313"

npm i pdfjs-dist@2.12.313

打开VScode，使用ctl+`打开控制台，输入：npm i pdfjs-dist 安装pdfjs-dist 切记要指定版本

3. 搭建基础的页面代码

话不多说，上代码：

<template>
  <div class="pdf-preview-box">
    <!-- <div class="pdf_down">
          <div class="pdf_set_left" @click="scaleD()">放大</div>
          <div class="pdf_set_middle" @click="scaleX()">缩小</div>
          <div class="pdf-pre" @click="prePage">上一页</div>
          <div class="pdf-next" @click="nextPage">下一页</div>
      </div> -->
    <canvas class="pdf-viewer"
        v-for="i in pdfParams.pdfPageTotal"
        :key="i"
        :id="'pdf-render' + i">
    </canvas>
  </div>
</template>

4.使用Vue3语法实现PDF文件的多页展示

4.1引入ref

import { onMounted, ref, reactive } from 'vue'

4.2将会用到的数据声明为响应式

const props = defineProps({
  pdfUrl: {
    type: String,
    default: '/testPdf.pdf',
    required: true,
  },
  containerWidth: {
    type: Number,
    default: 700,
    required: true,
  },
});

const pdfParams = reactive({
  currentPageNumber: 1,
  pdfScale: 1.0,
  pdfPageTotal: 0, // 总页数
});

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