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();
}