vue项目实现本地PDF翻页预览功能（使用vue-pdf）

1.需求

在页面中预览本地在工程文件public/pdfs目录下多页码可翻页的PDF文件

2.实现

（主要功能代码，精简版）

1. 安装vue-pdf npm install vue-pdf
2. 引入pdf import pdf from 'vue-pdf';和注册 components: {pdf},
3. js部分

 data() {
    return {
      pageTotalNum: 1, // 总页数
      pdfUrl: '', // 文件路径
      pageNum: 1, // 当前页数
    };
  },

  props: {
    url: {
   	// 文件地址，格式为 文件名+'.pdf'
      type: String,
      required: true,
    },
  },

监听选中文件的变动，拼接路径，即前面pdfUrl的值，路径这一步很重要!!!

简单来说就是：

• 开发环境路径：/pdfs/ + 文件名 +.pdf
• 生产环境路径：线上地址+ pdfs/ + 文件名 +.pdf

  watch: {
    url: {
    // 监听文件地址变化
      handler(val) {
        if (val) {
        // 生产环境下需要加线上地址VUE_APP_PUBLIC_PATH，开发环境不用加
          this.pdfUrl =
            process.env.NODE_ENV === 'production' ?
              `${process.env.VUE_APP_PUBLIC_PATH}pdfs/${this.url}` :
              '/pdfs/' + this.url;
        }
      },
      immediate: true,
    },
  },

  methods: {
    // 上一页
    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;
    },
  },

4. HTML展示使用

PDF部分

		<pdf
          class="pdf-show"
          :src="pdfUrl"
          :page="pageNum"
          @num-pages="pageTotalNum = $event"
        />

ps： 关于参数解释：
①其中pdfUrl为要预览的文件路径
②pageNum为当前显示第pageNum页
③@num-pages="pageTotalNum = $event"方法用于计算改pdf页码总数，pageTotalNum 表示总页码数

按钮部分

<div class="tools">
  <button
    @click="prePage"
    class="pdf-button"
  >
    上一页
  </button>
  <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
  <button
    @click="nextPage"
    class="pdf-button"
  >
    下一页
  </button>
</div>

3.完整代码

（包含没用上的代码，自己筛选）

<template>
  <div class="pdf-wrapper">
    <!-- PDF展示部分 -->
    <div class="pdf-content">
      <div class="pdf-contain">
        <pdf
          class="pdf-show"
          :src="pdfUrl"
          :page="pageNum"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum = $event"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        />
      </div>
    </div>
    <!-- 按钮部分 -->
    <div class="tools">
      <button
        @click="prePage"
        class="pdf-button"
      >
        上一页
      </button>
      <!-- 页码 -->
      <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
      <button
        @click="nextPage"
        class="pdf-button"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf';
export default {
  name: 'PDF',
  components: {pdf},
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  watch: {
    url: {
      handler(val) {
        if (val) {
          console.log(val, 89898);
          this.pdfUrl =
            process.env.NODE_ENV === 'production' ?
              `${process.env.VUE_APP_PUBLIC_PATH}pdfs/${this.url}` :
              '/pdfs/' + this.url;
        }
      },
      immediate: true,
    },
  },
  created() {
    console.log(this.pdfUrl, 8989);
  },
  data() {
    return {
      pageTotalNum: 1,
      pdfUrl: '',
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      numPages: 0,
    };
  },
  mounted() {
    // this.getNumPages()
  },
  methods: {
    getpdf() {
      this.$http
          .get('/pdfs/文件名.pdf', {baseURL: ''})
          .then((res) => {
            console.log(res, 'reeeeee');
            this.pdfUrl = res.data;
          });
    },
    // 计算pdf页码总数
    getNumPages(url) {
      const loadingTask = pdf.createLoadingTask(url);
      loadingTask
          .then((pdf) => {
            this.pdfUrl = loadingTask;
            this.pageTotalNum = pdf.numPages;
            console.log(this.pageTotalNum, 'pageTotalNum');
          });
    },
    // 上一页函数，
    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);
    },
  },
};
</script>

<style lang="scss" scoped>
.pdf-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.pdf-wrapper span {
  width: 100%;
}
.tools {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
  margin-bottom: -3%;
  padding-top: 2%;
}
.pdf-content {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 98%;
  border-radius: 50px;
  overflow-x: hidden;
  .pdf-contain {
    width: 100%;
    overflow-x: hidden;
    .pdf-show {
      width: 100%;
  }
  }
}
.pdf-button {
  width: 240px;
  height: 60px;
  font-size: 30px;
  border-radius: 20px;
}
.pdf-button:hover{
  cursor: pointer;
  transform: scale(1.2);
}
.page {
  font-size: 48px;
  color: #fff;
}
</style>