vue-pdf 在 nuxt2 中的使用(详细注释)

1. 首先安装插件 (推荐使用一下版本号)

// 目前是稳定版本，如有需要可以按照其他版本
npm i vue-pdf@4.2
npm i pdfjs-dist@2.5.207

2.  在 nuxt.config.js 中添加下面的代码

  plugins: [
    ...
    // 以上代码
    // /plugins/pdf.js 需创建pdf.js 文件
    { src: "~/plugins/pdf.js", ssr: false },
  ],

3. .新建一个 pdf.js 注册 vue-pdf

// plugins/pdf.js

import Vue from "vue";
import pdf from "vue-pdf";

Vue.component("pdf", pdf);

//挂载到全局，用于 createLoadingTask 功能

export default function ({ app, redirect }, inject) {
  inject("pdf", pdf);
}

4.然后使用到页面中(组件中)

src 是 pdf 的地址 page 是显示第几页 如果想展示全部可以 添加 v-for 便利每一页有方法获取到每一页 可以自己设置两个按钮添加俩个点击事件来对 page++或者 page--做上一页下一页功能 这里我会把两个功能都写出来 供大家参考(分页跟全部加载)

 4.1 分页加载

4.1.1 HTML 部分

<!-- 分页 -->
<pdf :src="blobSrc" :page="currPage"></pdf>

<span style="margin-right: 20px; color: #131313">共{{ totalPages }}页</span>

<el-button type="text" @click="updatePage('preview')">上一页</el-button>
<span>第{{ currPage }}页</span>
<el-button type="text" @click="updatePage('next')">下一页</el-button>

4.1.2 Js 部分

export default {
  data() {
    return {
      obj: {}, // 接口数据
      blobSrc: null, // pdf的url
      totalPages: 1, // 页码总数
      currPage: 1, // 当前页码
    };
  },
  methods: {
    getview(id) {
      // 调用 $indexApi 对象的 getpageView 方法，传入参数 id
      this.$indexApi.getpageView(id).then((r) => {
        // 使用获取到的数据更新当前对象的属性 obj
        this.obj = { ...r.data };
        // 创建一个 PDF 的加载任务，使用 $pdf 对象的 createLoadingTask 方法
        this.blobSrc = this.$pdf.createLoadingTask({
          // 传入 PDF 文件的 URL
          url: this.obj.filesPath,
          // CMapReaderFactory 是一个工厂对象，可能是用于处理 CMap（字符映射）的
          CMapReaderFactory,
        });

        // 等待加载任务完成
        this.blobSrc.promise
          .then((pdf) => {
            // 当加载完成时，获取 PDF 的信息，例如总页数
            this.totalPages = pdf._pdfInfo.numPages;
          })
          .catch((error) => {
            // 如果加载过程中出现错误，输出错误信息到控制台
            console.error("pdf加载失败", error);
          });
      });
    },
    // 上一页/下一页
    updatePage(str) {
      // 如果参数是 "preview" 且当前页码大于 1，则向前翻一页
      if (str === "preview" && this.currPage > 1) {
        this.currPage -= 1;
      } 
      // 如果参数是 "next" 且当前页码小于总页数，则向后翻一页
      else if (str === "next" && this.currPage < this.totalPages) {
        this.currPage += 1;
      }
      // 注意：如果当前页码是第一页且参数是 "preview"，或者当前页码是最后一页且参数是 "next"，不会执行任何操作
    },
  },
};

4.2  单页加载全部 这个相对简单

4.2.1  HTML 部分

<!-- 单页 -->
<pdf :src="blobSrc" :page="i" v-for="i in totalPages" :key="i"></pdf>

4.2.2 Js 部分 

export default {
  data() {
    return {
      obj: {}, // 接口数据
      blobSrc: null, // pdf的url
      totalPages: 1, // 页码总数
    };
  },
  methods: {
    getview(id) {
      // 调用 $indexApi 对象的 getpageView 方法，传入参数 id
      this.$indexApi.getpageView(id).then((r) => {
        // 使用获取到的数据更新当前对象的属性 obj
        this.obj = { ...r.data };
        // 创建一个 PDF 的加载任务，使用 $pdf 对象的 createLoadingTask 方法
        this.blobSrc = this.$pdf.createLoadingTask({
          // 传入 PDF 文件的 URL
          url: this.obj.filesPath,
          // CMapReaderFactory 是一个工厂对象，可能是用于处理 CMap（字符映射）的
          CMapReaderFactory,
        });

        // 等待加载任务完成
        this.blobSrc.promise
          .then((pdf) => {
            // 当加载完成时，获取 PDF 的信息，例如总页数
            this.totalPages = pdf._pdfInfo.numPages;
          })
          .catch((error) => {
            // 如果加载过程中出现错误，输出错误信息到控制台
            console.error("pdf加载失败", error);
          });
      });
    },
  },
};