服务端导入导出Excel

问题：希望实现SpreadJS+Vue+Axios实现服务器的加载和上传Excel

背景：

用户希望在前端通过UI进行数据模板设计或者报表填写，然后上传到服务器进行保存，中途退出后，下一次可以继续填写未完成的报表。

解决方案：

实现上述需求需要两个前后台配合实现的需求，其一是后端有一个接收前端传入数据的接口，其二是前端有一个可以导入后台传入的数据的按钮。

我们将这两个核心的功能进行了Demo撰写，如下所示：

前台核心代码

一、上传到服务器按钮设计

exportXlsx: function() {
  const json = this.spread.toJSON();
  const excelIo = new IO();
  excelIo.save(json, blob => {
    const fd = new FormData();
    fd.append("test.xlsx", blob);
    axios({
      method: "post",
      url: "spread/saveExport",
      data: fd,
      headers: {
        cache: false,
        "Content-Type": "application/x-www-form-urlencoded",
        processData: false,
        "Access-Control-Allow-Origin": "*",
        crossDomain: true
      },
      withCredentials: true
    }).then(
      response => {
        if (response.data.isSuccess == 1) {
          alert("上传成功！保存位置：" + response.data.localPath);
        }
      },
      err => {
        alert(err.errorMessage);
      }
    );
  });
}

二、从服务器载入文件按钮设计

importXlsx: function() {
  const excelIo = new IO();
  axios({
    method: "post",
    url: "spread/importXlsx",
    responseType: "blob",
    headers: {
      cache: false,
      "Content-Type": "application/x-www-form-urlencoded",
      processData: false,
      "Access-Control-Allow-Origin": "*",
      'X-Requested-With': 'XMLHttpRequest',
      crossDomain: true
    }
  }).then(
    response => {
      // 加载Excel
      console.log(response);
      excelIo.open(response.data, json => {
        this.spread.fromJSON(json);
      });
    },
    err => {
      console.log(err);
    }
  );
}

后端核心代码：

一、在Controller层接受前端上传的blob文档

public Map<String, Object> saveExport(HttpServletRequest request) throws IOException, ServletException {
	int result = 0;
	Map<String, Object> resultMap = new HashMap<String, Object>();
	MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
	Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
	MultipartFile file = fileMap.get("test.xlsx");
	// 测试将上传文件转存至指定路径，模拟服务器保存
	File newfile = new File(SpreadController.class.getResource("/").getPath() + "files/test.xlsx");
	System.out.println("保存位置：" + newfile.getAbsolutePath());
    
    // 对处理结果的json进行返回
	try {
		file.transferTo(newfile);
		resultMap.put("isSuccess", 1);
		resultMap.put("localPath", newfile.getAbsolutePath());
	} catch (Exception e) {
		resultMap.put("isSuccess", result);
		resultMap.put("errorMessage", e.getMessage());
		e.printStackTrace();
	}
	return resultMap;
}

二、在Controller层返回后端处理过的文档数据

public void importXlsx(HttpServletRequest request, HttpServletResponse response, Model model) {
	int size = 4096;
	OutputStream os = null;
    // 模拟服务端文件保存地址，如果是oss，则用oss的地址
	String ssjsonPath = SpreadController.class.getResource("/").getPath() + "files/" + xlsxFile;
	File importFile = new File(ssjsonPath);
	FileInputStream fis = null;
	try {
		fis = new FileInputStream(importFile);
		int len = 0;
		byte[] buf = new byte[size];
		os = response.getOutputStream();
		while ((len = fis.read(buf)) != -1) {
			os.write(buf, 0, len);
			os.flush();
		}
	} catch (Exception e) {
		e.printStackTrace();
	} finally {
		try {
			fis.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
    // 处理返回的结构体即可
}