后端返回的文件流，vue在线预览excel---待完善

项目场景：

上传excel文件后，需实现预览功能，后端返回的文件流，需要实现预览功能

---

解决方案：

preview() {
	const _this = this;
    _this.$http({ 
    	method: "get",
		responseType: "arraybuffer", // 预览arraybuffer，下载：blob
		url:"接口地址",
    })
    .then((res) => {
    	console.log(res); // 图一
    	let data = new Uint8Array(res.data); //
        let workbook = XLSX.read(data, { type: "array" });
        let sheetNames = workbook.SheetNames; // 工作表名称集合
        this.workbook = workbook;
        this.cardActive = sheetNames[0];
        this.getTable(sheetNames[0]);
     })
     .catch((error) => {
        this.previewFile = false;
        this.$message.error("预览失败");
     });
},
getTable(sheetName) {
	var worksheet = this.workbook.Sheets[sheetName];
    this.tableau = XLSX.utils.sheet_to_json(worksheet, {
    	header: 1,
    	defval: "",
    }); // 直接v-for循环
},

图一：

图二

html部分

<el-dialog :visible.sync="previewFile" width="1000px">
  <div id="table">
    <table border="1" v-if="tableau" style="border-collapse: collapse">
      <tr v-for="(item, index) in tableau" :key="index">
        <td v-for="(item1, index1) in item" :key="index1">{{ item1 }}</td>
      </tr>
    </table>
  </div>
</el-dialog>