preview-file-vue

安装

$ npm install --save preview-file

或

yarn add preview-file

引用

用户注册全局事件或组件

import PreviewFile from 'preview-file-vue'
import 'preview-file-vue/preview-file-vue.css'
Vue.use(PreviewFile)

支持格式

docx、xls、xlsx、pdf、txt、md、js、css、json

使用方法

1.直接传递type和fileUrl进行渲染

<preview-file 
  ref="PreviewFile" 
  :type="type" // 字符串，上传文件类型
  :fileUrl="fileUrl" // 文件url，可以是线上路径，也可以是blob虚拟地址
/>

2.上传本地文件

<input type="file" @change="changeHandle"/>
<preview-file ref="PreviewFile" />
文本框回调调用组件changeHandle方法
changeHandle (event) {
  this.$refs.PreviewFile.changeHandle(event)
}