怎么使用vue-pdf插件实现pdf文档预览功能

这篇文章主要介绍了怎么使用vue-pdf插件实现pdf文档预览功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用vue-pdf插件实现pdf文档预览功能文章都会有所收获，下面我们一起来看看吧。

vue-pdf插件的使用

实现功能

• 多个pdf预览

• 获取页码，每个pdf文档实现分页预览功能

实现步骤如下：

1.npm安装

在根目录下输入一下命令：

npm i pdfjs-dist@2.5.207 --savenpm i vue-pdf@4.2.0 --save

2.全局注册或者局部注册(我这边是局部注册)——封装一个pdf预览组件

1 template组件内容如下：

<template>  <div class="pdf-preview">    <div class="head">      <div>        <el-button @click="last" class="mr10" :disabled="Num == 0">          上一个</el-button        >        <el-button @click="next" class="mr10" :disabled="Num == url.length - 1">          下一个</el-button        >        <span class="page">{{ Numnow }}/{{ NumA }}</span>      </div>      <div class="fenye">        <el-button @click="downPDF" class="mr10 down">下载</el-button>      </div>    </div>    <pdf      ref="pdf"      :src="src"      :page="pageNum"      @page-loaded="pageLoaded($event)"      @num-pages="pageTotalNum = $event"      @error="pdfError($event)"      @link-clicked="page = $event"    >    </pdf>    <div class="tools">      <div class="fenye">        <el-button @click="prePage" class="mr10"> 上一页</el-button>        <el-button @click="nextPage" class="mr10"> 下一页</el-button>        <span class="page">{{ pageNum }}/{{ pageTotalNum }}</span>      </div>    </div>  </div></template>

2 js内容如下：

<script>import pdf from 'vue-pdf';export default {  name: 'pdfPreview',  props: {    url: {      default: '',      type: Array,    },  },  components: {    pdf,  },  data() {    return {      src: '', // 预览地址      pageNum: 1, // 当前页码      pageTotalNum: 1, // 总页数      Num: 0,      NumA: 0, //总个数      Numnow: 1, //当前个数      vuePdf: null,    };  },  mounted() {    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下    this.$nextTick(() => {      this.NumA = this.url.length;      var url = this.url[this.Num].fileSrc;      this.src = pdf.createLoadingTask(url);    });  },  methods: {    last() {      this.Numnow--;      this.Num--;      var url = this.url[this.Num].fileSrc;      this.src = pdf.createLoadingTask(url);    },    next() {      this.Numnow++;      this.Num++;      var url = this.url[this.Num].fileSrc;      this.src = pdf.createLoadingTask(url);    },    // 上一页函数，    prePage() {      var page = this.pageNum;      page = page > 1 ? page - 1 : this.pageTotalNum;      this.pageNum = page;    },    // 下一页函数    nextPage() {      var page = this.pageNum;      page = page < this.pageTotalNum ? page + 1 : 1;      this.pageNum = page;    },    // 页面加载回调函数，其中e为当前页数    pageLoaded(e) {      this.curPageNum = e;    },    // 抛出错误的回调函数。    pdfError(error) {      console.error(error);    },    downPDF() {      // 下载 pdf      var url = this.url[this.Num].fileSrc;      var tempLink = document.createElement('a');      tempLink.style.display = 'none';      // tempLink.href = url;      window.open(url);      tempLink.setAttribute('download', 'XXX.pdf');      if (typeof tempLink.download === 'undefined') {        tempLink.setAttribute('target', '_blank');      }      document.body.appendChild(tempLink);      tempLink.click();      document.body.removeChild(tempLink);    },  },};</script>

3 css内容如下：

<style lang="scss" scoped>.pdf-preview {  .head {    margin-bottom: 10px;    display: flex;    justify-content: space-between;  }  .tools {    display: flex;    justify-content: space-between;    .fenye {      margin-top: 20px;    }  }  .page {    margin-left: 10px;  }}</style>

3.pdf预览组件的使用

1 引入pdf预览组件

import PdfPreview from '@/components/PdfPreview';//路径根据实际情况调整

2 注册组件

components: {PdfPreview}

3 组件的使用

<PdfPreview :url="specificationFiles"></PdfPreview>

上面中的url的参数内容如下：

specificationFiles:[{fileName:'产品手册1',fileSrc:'xxxx'},{fileName:'产品手册2',fileSrc:'xxxx'},]

关于“怎么使用vue-pdf插件实现pdf文档预览功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用vue-pdf插件实现pdf文档预览功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。