vue预览xlsx

        预览文件的数据流从服务器的接口传入：

1. 安装插件 yarn add xlsx

2.引入插件

        import XLSX from "xlsx"  // 早期版本的引入方式

        import * as XLSX from 'xlsx/xlsx.mjs' //  为了适应新版本xlsx的引入方式

3.  html中实现多sheet的切换，并将数据显示到div

<div class="tab">
                    <a-radio-group :value="sheetActive" button-style="solid" @change="changeSheet">
                      <a-radio-button v-for="(item,index) in sheetNames" :key="index" :value="item">{{item}}</a-radio-button>
                    </a-radio-group>
                </div>
                 <div v-html="activeTable" style="padding: 10px 15px"></div>

 api(option).then((res)=>{   
    ...     
                            this.initExcelPreview(res.data)
                        });
 
/**
     * 表格数据预览
     */
    initExcelPreview(blob) { // 接口返回blob
      try {
           const _this = this
           let fr = new FileReader();
           fr.readAsArrayBuffer(file);
           fr.addEventListener("loadend",(e) => {
                let buffer = e.target.result;
                const workbook = XLSX.read(buffer, {type: 'array'})
                const sheetNames = workbook.SheetNames // 工作表名称集合
                _this.workbook = workbook
                _this.sheetNames = sheetNames
                _this.sheetActive = sheetNames[0]
                _this.getTable(sheetNames[0])
            },false);
      } catch (e) {
       ...
      }
    },
    /**
     * 根据工作表名称获取数据
     * @param sheetName
     */
    changeSheetTable(e){
       let sheetName =e.target.value
       this.sheetActive =sheetName
       this.getTable(sheetName)
    },
    getTable(sheetName) {
      try {
        const worksheet = this.excel.workbook.Sheets[sheetName]
        let htmlData = XLSX.utils.sheet_to_html(worksheet, {header: '', footer: ''})
        this.activeTable = htmlData
      } catch (e) {
       ...
      }
    },