前端导出Excel和下载后端Excel以及前端处理Excel_前端传入excel文件后端修改再下载-CSDN博客

本文详细介绍如何在前端使用npm包file-saver和xlsx进行Excel的导出与上传处理，包括单sheet和多sheet导出，以及从Excel文件中读取JSON数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端导出Excel

工具：npm i file-saver xlsx
方法：

listToExcel(){
        //table_to_book方法传入表格dom对象
        let wb = Xlsx.utils.table_to_book(document.querySelector("#table"));
        let wbout = Xlsx.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "报表下载"+ ".xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }

多sheet导出的看这位点这里，或者这里

下载后端Excel

使用axios.post请求，加上optionsresponseType: 'blob'，如下：

export function example(params) {
  return service.post('api/v1/exportExcel',params,{responseType: 'blob'})
}

其中service是使用axios.create创建的axios实例对象。

然后和下载其他一样使用a标签：

example().then(res=>{
	let alink = document.createElement('a');
	alink.download = "表格下载.xls";
	alink.style.display = 'none';
	alink.href = URL.createObjectURL(res.data);
	document.body.appendChild(alink);
	alink.click();
	document.body.removeChild(alink);
});

get请求也是一样，要是图方便也可以直接改alink.href = 'get请求的地址';，这样就不用这里了export function example。一般不建议改，请求还是都放在一起好管理。

前端直接处理用户上传的Excel(转成json)

有英语基础的建议直接读官方文档https://www.npmjs.com/package/xlsx
话不多说直接上代码：

<el-upload
          class="upload-demo"
          ref="upload"
          accept=".xls,.xlsx"
          :limit="3"
          multiple
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="onUploadChange"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
        </el-upload>

//选取文件钩子-开启多选时，每个文件都会依次执行钩子
      onUploadChange(file){
        console.log('file:', file)
        const isXls=(file.raw.type==='application/vnd.ms-excel' ||
          file.raw.type==='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
        const isLimit500k=file.size/1024/1024<0.5;
        if(!isXls){
          return this.$message.error('只能上传Excel文件')
        }
        if(!isLimit500k){
          return this.$message.error('文件大小不能超过500k')
        }
        var reader = new FileReader();
        reader.onload = function(e) {
          let data = new Uint8Array(e.target.result);
          let workbook = XLSX.read(data, {type: 'array'});
          console.log('workbook:', workbook)
          /* DO SOMETHING WITH workbook HERE */
          //将Excel内容转为json格式
          let worksheet = workbook.Sheets[workbook.SheetNames[0]];
          let jsonExcel=XLSX.utils.sheet_to_json(worksheet);
          console.log('jsonExcel:', jsonExcel)
        }
        reader.readAsArrayBuffer(file.raw);
      }