gos-viewer

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

安装

npm install gos-viewer -S

或者

yarn add gos-viewer

快速上手

在 main.js 引入

import GosViewer from 'gos-viewer'
Vue.use(GosViewer)

在页面中使用

1. 模态框形式

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

<script>
export default {
  name: 'DemoPage',
  data () {
    return {
      file: null
    }
  },
  created () {
    // 初始化文件查看器
    this.$gosViewer.init()
    // 监听关闭事件
    this.$gosViewer.onWindowClose(() => {
      // 重置文件表单
      this.$refs.file.value = ''
    })
  },
  methods: {
    handleChange (e) {
      // 获取选择的文件
      const [file] = e.target.files
      // 打开文件
      this.$gosViewer.open({
        data: file
      })
    }
  }
}
</script>

2. 嵌入模式（详见examples）

<script>
export default {
  name: "TestEmbedMode",
  data() {
    return {
      file: {
        file: new File(["666"], "index.txt", {
          type: "text/plain",
        }), // 文件
        type: "text", // 打开类型
      },
    };
  },
};
</script>

<template>
  <div>
    <gos-viewer
      ref="gosViewer"
      width="1200px"
      height="800px"
      v-model="file"
      style="border: 1px solid #ddd"
    ></gos-viewer>
  </div>
</template>