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

发布时间:2023-05-10 17:49:00 作者:iii
来源:亿速云 阅读:830

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

vue-pdf插件的使用

实现功能

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

实现步骤如下:

1.npm安装

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

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

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

2.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.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>

2.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预览组件的使用

3.1 引入pdf预览组件

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

3.2 注册组件

components: {PdfPreview}

3.3 组件的使用

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

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

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

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

推荐阅读:
  1. Gradle如何给虚拟机传参数
  2. eclipse.ini配置文件的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue-pdf pdf vue

上一篇:Android Flutter怎么在点击事件上添加动画效果

下一篇:python高阶函数functools模块如何使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》