【vue-pdf】vue项目实现预览PDF文件(前端实现)

【vue-pdf】vue项目实现预览PDF文件(前端实现)

• 需要安装vue-pdf
  NPM中文网文档

npm install vue-pdf -s

引入组件并注册

import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

准备数据

• 这里我直接用了一个对象，方便管理，你可以随意定义

// 文件预览
      fileShow: {
      	// 控制显示
      	open:false,
        // PDF文件预览路径
        url: null,
        // 当前页码
        pdfPageNum: 1,
        // 总页码
        pdfCount: 0,
        // 加载状态(需要自行嵌套元素使用 这里为了尽可能简单表达就不放到dom里了)
        loading:false,
      },

DOM结构

<pdf v-if='fileShow.open' :src="fileShow.url" :page="fileShow.pdfPageNum"
             @num-pages="fileShow.pdfCount = $event"