pdf预览通过外部点击进行跳转--vue/pdf.js_vue2支持展示pdf文件的索引跳转的组件

---

前言

当前项目中需要实现一个pdf在线预览 并根据外部按钮进行跳转到对应位置的需求
从网上各种百度 查询 没有看到有相似功能实现 通过查询各种api 进行了一个实现
ps: 我的预览跳转是 根据pdf中的批注进行跳转 仅供参考

---

一、下载依赖

npm install vue-pdf
npm install pdfjs-dist
1
2

二、实现

1. 引入依赖

import pdf from "vue-pdf";
import * as pdfjsLib from "pdfjs-dist/es5/build/pdf";
1
2

vue-pdf 用于 pdf 文档的在线预览 对pdf.js进行了对应封装 在vue中使用比较简洁
pdf.js 主要用于根据各种api 获取pdf中的对应数据
ps: 官方文档我实在是什么都没找到

2. 实现预览

  components: {
    pdf,
  },
  // 对于vue-pdf 进行注册
1
2
3
4

              <div class="tools">
                <el-button @click="prePage" :disabled="pageNum == 1">
                  上一页
                </el-button>
                <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
                <el-button
                  @click="nextPage"
                  :disabled="pageNum == pageTotalNum"
                >
                  下一页
                </el-button>
              </div>
              <pdf
                ref="pdf"
                :src="url"
                :page="pageNum"
                :rotate="pageRotate"
                @page-loaded="pageLoaded($event)"
                @num-pages="pageTotalNum = $event"
                @error="pdfError($event)"
                @link-clicked="page = $event"
              >
              </pdf>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 预览pdf
   getPdf() {
      let url = this.pdfUrl; // 此处为后端返回
      let loadingTask = pdf.createLoadingTask({ url: url });
      loadingTask.promise
        .then((pdf) => {
          this.url = loadingTask;
          // this.numPages = pdf.numPages;
          this.pageTotalNum = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

    // 上一页函数，
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

预览通过vue-pdf实现 我的实现方式为分页实现

3. 跳转实现

跳转按钮携带数据 – pdf中批注(后端根据pdf中解析出的批注信息返回)

                  <el-button
                    type="text"
                    size="small"
                    @click="toAcher(row)"
                  >
                    跳转
                  </el-button>
1
2
3
4
5
6
7

    toAcher(row) {
      let url = this.pdfUrl;
      let loadingTaskCopy = pdfjsLib.getDocument(url);
      loadingTaskCopy.promise.then((pdfDocument) => {
        let numPages = pdfDocument.numPages;
        // 获取第一页
        for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
          pdfDocument.getPage(pageNumber).then((page) => {
            page.getAnnotations().then((annotations) => {
              annotations.forEach((annotation) => {
                // 输出或处理批注信息
                // content 为返回的对应的批注内容
                if (
                  row.content == annotation.contents &&
                  !annotation.parentId
                ) {
                  let viewport = page.getViewport({ scale: 1 });
                  this.pageNum = pageNumber;
                  let canvasY = viewport.height - annotation.rect[1];
                  const container = document.getElementById("myPdf");
                  let viewHOrigin = 381.2;
                  let viewH = (window.innerHeight * 0.4).toFixed(2);
                  let scaleRate = viewH / viewHOrigin;
                  container.scrollTop = (canvasY + 36) * scaleRate;
                  container.scrollLeft = annotation.rect[2];
                }
              });
            });
          });
        }
      });
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

通过以上可以基本实现一个通过批注进行跳转的功能
ps: 我这里有一些根据自己的页面进行的操作

1. let viewHOrigin = 381.2; 这里是获取我自己的页面高度 用作当分辨率不同时的切换
2. let viewH = (window.innerHeight * 0.4).toFixed(2); 此处 window.innerHeight * 0.4 的操作是因为我设置了放置pdf预览的容器为40vh
3. container.scrollTop = (canvasY + 36) * scaleRate; 此处设置距离顶部为 获取到批注位置 +36是因为预览pdf时使用的是分页预览 容器上方有按钮占位

总结

以上就是我实现点击外部按钮对于预览到的pdf进行跳转到对应位置的实现 希望能帮助到和我有同样问题的各位朋友!