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;
},
相关推荐
古一|15 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda715 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
熊猫钓鱼>_>15 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋15 小时前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
JYeontu16 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_16 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放16 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
国家不保护废物16 小时前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
CHANG_THE_WORLD17 小时前
PDFium导出pdf 图像
开发语言·c++·pdf
momo_al17 小时前
Umi-OCR制作双层PDF
pdf·ocr