使用Vue-PDF实现预览、翻页、放大缩小、侧边栏预览

需求

1. pdf预览
2. 翻页
3. 禁止下载打印
4. 侧边栏预览

实现效果

安装vue-pdf

npm i vue-pdf
1

引入并使用

<pdf
  ref="pdfRef"
  style="margin: 0 auto"
  :src="pdfData"
  :page="currentPage"
  @num-pages="pageTotalNum = $event"
></pdf>

import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask(
  "xxx.pdf"
);

export default {
  name: "pdfView",
  components: {
    pdf,
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

关键代码

获取PDF使用canvas绘制并转化成base64图片

 /**
  * @description 加载PDF获取canvas图片
  */
 loadPdf() {
   this.loading = true;
   this.pdfData.promise.then((pdf) => {
     this.pageTotalNum = pdf.numPages;
     let pagePromise = [];
     for (let index = 1; index <= this.pageTotalNum; index++) {
       const element = pdf.getPage(index);
       pagePromise.push(element);
     }
     this.getImageList(pagePromise);
   });
 },
 /**
  * @description 通过page 渲染canvas获取base64图片
  */
 getImageList(pagePromise) {
   let result = [];
   Promise.all(pagePromise)
     .then((res) => {
        for (let index = 0; index < res.length; index++) {
          // 当前页
          const page = res[index];
          // 绘制canvas
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          const viewport = page.getViewport({ scale: 1 });
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          };
          result.push(page.render(renderContext).promise);
          // canvas转图片
          Promise.all(result).then(() => {
            this.imgList.push(canvas.toDataURL());
            this.loading = false;
          });
        }
     })
     .catch(() => {
       this.loading = false;
     });
 },
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

翻页，就是改变当前page就行了，会自动渲染

/**
 * @description 上一页
 */
prePage() {
  let page = this.currentPage;
  if (page !== 1) {
    page = page > 1 ? page - 1 : this.pageTotalNum;
    this.currentPage = page;
  }
},
/**
 * @description 下一页
 */
nextPage() {
  let page = this.currentPage;
  if (page !== this.pageTotalNum) {
    page = page < this.pageTotalNum ? page + 1 : 1;
    this.currentPage = page;
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

放大缩小

/**
 * @description 放大
 */
zoomIn() {
  this.scale += 25;
  const itemEl = this.$refs["pdfRef"].$el;
  itemEl.style.width = parseInt(this.scale) + "%";
},
/**
 * @description 缩小
 */
zoomOut() {
  this.scale -= 25;
  const itemEl = this.$refs["pdfRef"].$el;
  itemEl.style.width = parseInt(this.scale) + "%";
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

关于下载、打印

下载：从后端获取的文件流直接通过转blob、a标签下载就行
打印：this.$refs["pdfRef"].pdf能够拿到pdf对象，里面有个print的方法可以使用

新增上传预览PDF

源代码

pdf预览

同理实现了一个canvas图片预览，在同一个仓库