file-viewer-test

file-viewer

一个支持多文件格式的web文件查看器

安装

npm install file-viewer-test -S

或者

yarn add file-viewer-test

快速上手

在 main.js 引入

import FileViewer from 'file-viewer-test'
Vue.use(FileViewer)

在页面中使用

<template>
  <div>
    <input
      ref="file"
      class="file-select"
      type="file"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: 'DemoPage',
  data () {
    return {
      file: null
    }
  },
  created () {
    // init file viewer
    this.$fileViewer.init()
    // listen to the close event of the file viewer
    this.$fileViewer.on('close', () => {
      this.$refs.file.value = ''
    })
  },
  methods: {
    handleChange (e) {
      const [file] = e.target.files
      // open a file through file viewer
      this.$fileViewer.open(file)
    }
  }
}
</script>