vue-pdf实现pdf文件预览和分页

我采用的是dialog封装的弹窗组件

javascript 复制代码
npm install --save vue-pdf

组件

javascript 复制代码
<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="dialogShow"
      width="655px"
      :append-to-body="true"
      :before-close="handleClose"
      top="0px"
    >
      <VuePdf 
        v-if="fileUrl" 
        class="file_view" 
        :src="fileUrl" 
        :page="currentPage" 
        @num-pages="pageCount=$event" 
        @page-loaded="currentPage=$event"  
        @loaded="loadPdf"
      />
      <div class="pageButton">
          <el-button size="mini" @click="changePage(0)" round>上一页</el-button>
          <el-button size="mini" @click="changePage(1)" round>下一页</el-button>
      </div>
    </el-dialog>
  </div>
</template>
javascript 复制代码
import VuePdf from "vue-pdf";
export default {
  name: "PdfView",
  components: {
    VuePdf,
  },
  props: {
  	//pdf地址
    fileUrl: {
      type: String,
      default: "",
    },
    //控制弹窗显示
    show: {
      type: Boolean,
      require: false
    },
  },
  watch: {
  	//监听到弹窗显示时,页数初始化到第一页
    show: {
      handler(newVal) {
        this.dialogShow = newVal
        this.currentPage = 1
      },
      immediate: true,
    },
  },
  data() {
    return {
      dialogShow:false,
      currentPage: 0, // 页码
      pageCount: 0, // 总页数
    };
  },
  methods: {
    changePage (val) { 
        if (val === 0 && this.currentPage > 1) { 
          this.currentPage --;
        }
        if (val === 1 && this.currentPage < this.pageCount) { 
          this.currentPage ++;
        }
    },
    // 加载的时候先加载第一页
    loadPdf () { 
        this.currentPage = 1 
    },
    //子传父 事件发射,关闭弹窗
    handleClose(){
      this.$emit('closeShow')
    }
  }
};
javascript 复制代码
.pageButton{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

父组件组件引入

javascript 复制代码
<PdfView
  :fileUrl="pdfUrl"
  :show="pdfShow"
  @closeShow="closeShow"
></PdfView>
javascript 复制代码
import PdfView from "./PdfView.vue";

components: { PdfView },

data() {
    return {
		pdfUrl: "", //点击的pdf地址
		pdfShow: false,//控制组件显示
    }
 }

mounted() {
	 this.pdfUrl = 'XXXXXX.pdf';
     this.pdfShow = true;
},

//接收子组件的关闭
closeShow() {
  this.pdfShow = false;
},
相关推荐
夏梦春蝉4 分钟前
ES6从入门到精通:其他特性
前端·javascript·es6
csdn_aspnet20 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel43 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
奋飛2 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor2 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter2 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript