<el-dialogv-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'});// 删除掉没有数据的sheetObject.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);}
}