Vue Luckyexcel 将文件流转成file文件后使用Luckysheet回显数据 - 附完整示例

<template>
  <div id="app">
    <luckysheet-excel
      ref="luckysheet"
      :options="options"
      @updateLuckysheet="updateLuckysheet"
    />
  </div>
</template>
 
<script>
import LuckysheetExcel from 'luckysheet-vue'
import { saveAs } from 'file-saver'
 
export default {
  components: {
    LuckysheetExcel
  },
  data() {
    return {
      options: {
        container: 'luckysheet', // 设定Luckysheet的容器
        title: 'Luckysheet', // 设定表格名称
        lang: 'zh' // 设定语言
      },
      luckysheetfile: null
    }
  },
  methods: {
    // 更新Luckysheet的配置
    updateLuckysheet(luckysheetfile) {
      this.luckysheetfile = luckysheetfile;
    },
    // 将文件流转换为File文件
    streamToFile(stream, filename) {
      return new Promise(resolve => {
        const reader = new FileReader();
        reader.onload = function (e) {
          resolve(new File([e.target.result], filename, { type: stream.type }));
        };
        reader.readAsArrayBuffer(stream);
      });
    },
    // 从服务器获取文件流并转换为Luckysheet支持的文件格式
    async fetchAndLoadSheet() {
      const response = await fetch('YOUR_FILE_STREAM_URL'); // 替换为你的文件流地址
      const blob = await response.blob();
      const file = await this.streamToFile(blob, 'filename.xlsx');
      this.luckysheetfile = [{ 'name': 'filename.xlsx', 'data': file }];
    }
  },
  mounted() {
    this.fetchAndLoadSheet(); // 在组件挂载后获取并加载Excel文件
  }
}
</script>

这个代码示例展示了如何在Vue应用中使用Luckysheet以及file-saver库来处理文件流。首先，在mounted钩子中，我们从服务器获取文件流，并使用streamToFile方法将其转换为File文件。然后，我们将这个文件赋值给luckysheetfile，Luckysheet组件会自动加载这个文件。这个过程模拟了从服务器获取文件并在前端显示的场景。