vue-pdf 预览pdf格式的文件

最新推荐文章于 2024-08-12 10:03:07 发布

jennyya

最新推荐文章于 2024-08-12 10:03:07 发布

阅读量1.2k

点赞数 1

分类专栏： js 文章标签： vue-pdf pdf预览

本文链接：https://blog.csdn.net/jennyya/article/details/99627746

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

需求：预览pdf格式的文件

实现：

一安装

npm install --save vue-pdf

二引入

import pdf from 'vue-pdf' // 哪个组件用到 在那个里面引入即可

       <div class="form">
          <p class="arrow" v-if="pageTotalNum>1">
            <el-button :type="pageNum>1?'primary':'info'" @click.stop="prePage" >上一页</el-button>
            {{pageNum}}/{{pageTotalNum}} //pageNum 当前页 ，pageTotalNum 总页数
            <el-button :type="pageNum<pageTotalNum?'primary':'info'" @click.stop="nextPage" >下一页</el-button>
          </p>
          <pdf class="pdf"
               ref="pdf"
               :page="pageNum"
               @num-pages="pageTotalNum=$event"
               @link-clicked="page = $event"
               :src="pdfUrl">
          </pdf>
        </div>

 export default {
    name: "viewAnswerCard",
    components:{papersBg,pdf},
    data(){
      return{
        pdfUrl: '',
        pageNum:1,
        pageTotalNum:1
      }
    },
    created() {
      this.getData();
    },
    methods: {
        //这里的文档地址是接口返回的
      getData(){
        this.$axios.get(dealUrl).then((res)=>{
          this.pdfUrl = res.data.data.path;
        }).catch()
      },
      prePage(){
        if(this.pageNum>1){
          var p = this.pageNum
          p = p>1?p-1:this.pageTotalNum
          this.pageNum = p
        }
      },
      nextPage(){
        if(this.pageNum<this.pageTotalNum){
          let  p = this.pageNum
          p = p<this.pageTotalNum?p+1:1
          this.pageNum = p
        }
      }
    }
  }