VUE结合Spring Boot完成Word文件流类型的下载

今天在给我的小伙伴们解决问题的时候，遇到了一个小问题就是前段怎么接收文件流进行下载的问题。这里是用Word模板生成相应的Word文件。

这里先说前段代码，首先拦截器处理

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.status === 200) {
    return response.data
  } else {
    if (response.statusText) {
      return Promise.reject(response.statusText)
    } else {
      return Promise.reject(response)
    }
  }
}, function (error) {
  console.log(error)
  if (error.response.data.errCode === '100119' || error.response.data.errCode === '100128') {
    //跳转页面
    store.commit('logout')
    router.replace({path: '/login'})
  }
  return Promise.reject(error.response.data)
})

注意啊，这里已经返回的response.data了

下面是API配置，这里划重点，responseType:'blob'

  // 下载合同
  downloadHe(p){
    return axios({
      url:"/contract/exertContract",
      method:'post',
      data:p,
      responseType:'blob',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
  },

下面是方法调用之后处理

                http.downloadHe(Qs.stringify(obj)).then(res=>{
                    let blob = new Blob([res.data],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8' });   
                    let link = document.createElement('a');
                    // link.download = fileName//a标签添加属性
                    let objectUrl = URL.createObjectURL(blob);
                    link.setAttribute("href",objectUrl);
                    link.setAttribute("download", '合同详情.docx'); 
                    link.click();
                    //释放内存
                    window.URL.revokeObjectURL(link.href)
                    })
                    } else {
                        //  console.log(this.formValidate)
                        this.$Message.error('请填写完整');
                    }
                })

上面这就是前段的代码了，其实后端代码也很简单，就是我的小伙伴有些错误操作，先看错误代码：

 if (suffix.equals("docx")) {
                XWPFDocument doc = new XWPFDocument(fileInputStream);
                replaceInTable(doc, map);
                response.reset();
                //指定文件类型
                response.setContentType("application/x-msdownload");

                String fileName = "" + System.currentTimeMillis() + ".docx";
                response.addHeader("Content-Disposition", "attachment; filename=" + fileName);
                ByteArrayOutputStream ostream = new ByteArrayOutputStream();
                OutputStream servletOS = null;
                try {
                    servletOS = response.getOutputStream();

                    doc.write(servletOS);
                    ostream.flush();
                    servletOS.write(ostream.toByteArray());
                    servletOS.flush();
                    ostream.close();
                    servletOS.close();
                } catch (Exception e) {
                    e.printStackTrace();
                }

            }

修改之后的代码正确代码如下：

OutputStream servletOS = null;
try {
    //获取文件后缀
    String suffix = PathUtils.getSuffix(modelPath);
    if (suffix.equals("docx")) {
        XWPFDocument doc = new XWPFDocument(fileInputStream);
        replaceInTable(doc, map);
        //指定文件类型
        response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8");
        servletOS = response.getOutputStream();
        doc.write(servletOS);
    }
} catch (Exception e) {
    e.printStackTrace();
}finally {
    servletOS.flush();
    servletOS.close();
}