vue3 预览excel文件

 <el-dialog
		v-model="viewDialog"
		title="预览文件"
		custom-class="dialogCommution"
		width="750px"
		:close-on-click-modal="false"
   		@close="handleClose"
	>

    <div class="file-pre">
      <el-tabs v-model="activeName"  type="border-card">
        <el-tab-pane v-for="(item,index) in excelSheet" :key="index" :label="item.name" :name="item.name">
            <div class="table" v-html="item.innerHTML"></div>
        </el-tab-pane>
      </el-tabs>
   </div>
  </el-dialog>

// npm i xlsx@0.17.5
import XLSX from 'xlsx';

const viewDialog = ref(false)
const excelSheet = ref([])
const activeName = ref('')
const downLoad = (item)=>{
  downloadLocal({fileId:item.id}).then(res => {
      const data = new Uint8Array(res);
      const workbook = XLSX.read(data, {
          type: 'array'
      });
      // 删除掉没有数据的sheet
      Object.values(workbook.Sheets).forEach((sheet, index) => {
          if (Object.keys(sheet).indexOf('!ref') === -1) {
              delete workbook.Sheets[workbook.SheetNames[index]];
          }
      });
      tableToHtml(workbook);
    })

}

const tableToHtml = (workbook) => {
  const sheetList = workbook.SheetNames.filter(v => v.indexOf('数据源') === -1);
  activeName.value = sheetList[0];
  sheetList.forEach(sheet => {
      const worksheet = workbook.Sheets[sheet];
      if (worksheet) {
          const innerHTML = XLSX.utils.sheet_to_html(worksheet);
          excelSheet.value.push({
              name: sheet,
              innerHTML: innerHTML
          });
      } else {
          excelSheet.value.push({
              name: sheet,
              innerHTML: '暂无数据',
          });
      }
  });
    viewDialog.value = true
}
// 关闭dialog 清除缓存
const handleClose = ()=>{
  excelSheet.value = []
  activeName.value = ''
}

请求需携带 {responseType:‘arraybuffer’}

const res = await axiosGet($api.safe.downloadLocal, params,{responseType:'arraybuffer'});

async function axiosGet(
	url: string,
	params?: Record<string, any>,
	config?: AxiosRequestConfig
): Promise<any> {
	try {
		const res = await instance({
			method: "get",
			url,
			params,
			...config,
		});
		return res.data;
	} catch (err) {
		return Promise.reject(err);
	}
}

.file-pre {
	height: calc(100vh - 40px);
	padding: 20px;

	.table-html-wrap table {
		border-right: 1px solid #e8eaec;
		border-bottom: 1px solid #e8eaec;
		border-collapse: collapse;
		margin: auto;
	}

	.table-html-wrap table td {
		border-left: 1px solid #e8eaec;
		border-top: 1px solid #e8eaec;
		white-space: wrap;
		text-align: left;
		min-width: 100px;
		padding: 4px;
	}

	table {
		border-top: 1px solid #EBEEF5;
		border-left: 1px solid #EBEEF5;
		width: 100%;
		overflow: auto;

		tr {
			height: 44px;
		}

		td {
			min-width: 200px;
			max-width: 400px;
			padding: 4px 8px;
			border-right: 1px solid #EBEEF5;
			border-bottom: 1px solid #EBEEF5;
		}
	}

	.el-tabs--border-card > .el-tabs__content {
		overflow: auto;
		height: calc(100vh - 110px);
	}
}