這篇文章將為大家詳細(xì)講解有關(guān)如何解決Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel的問題，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作、做網(wǎng)站，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文發(fā)布平臺(tái)等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

導(dǎo)出Excel功能

這里不談別人怎么實(shí)現(xiàn)的，我是從后臺(tái)生成了Excel流文件返回給前端的。

下面具體看一下后臺(tái)的代碼：

/**
  * 批量導(dǎo)出用戶
  * @param condition
  * @param response
  */
@PostMapping("/exportUser")
public void exportUser(@RequestBody UserQueryCondition condition,HttpServletResponse response){
 XSSFWorkbook book = new XSSFWorkbook();
 try {
  List<UserParam> list = indexService.exportUser(condition);
  if (list != null && list.size() > 0) {
   XSSFSheet sheet = book.createSheet("mySheent");
   String[] vals = {"用戶ID", "郵箱賬號(hào)","昵稱","年齡","性別","狀態(tài)", "注冊(cè)時(shí)間"};
   createExcel(sheet, 0, vals);
   for (int i = 0; i < list.size(); i++) {
    UserParam entity = list.get(i);
    String[] vals2 = new String[]{String.valueOf(entity.getId()), entity.getEmail(), entity.getName(), String.valueOf(entity.getAge()),
            entity.getSex() == 0 ? "女":"男",entity.getRemoved() == 0 ? "啟用":"禁用",entity.getRegisterDate()};
    createExcel(sheet, i + 1, vals2);
   }

   book.write(generateResponseExcel("用戶列表",response));
  }
  book.close();
 }catch(Exception e){
  e.printStackTrace();
 }
}

/**
  * @param excelName
  *   要生成的文件名字
  * @return
  * @throws IOException
  */
private ServletOutputStream generateResponseExcel(String excelName, HttpServletResponse response) throws IOException {
 excelName = excelName == null || "".equals(excelName) ? "excel" : URLEncoder.encode(excelName, "UTF-8");
 response.setContentType("application/vnd.ms-excel;charset=utf-8");
 response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx");

 return response.getOutputStream();
}

對(duì)于第一個(gè)函數(shù)exportUser來說，主要是根據(jù)傳回來的條件查詢數(shù)據(jù)庫并生成相應(yīng)的Excel表格，之后book.write(generateResponseExcel(“用戶列表”,response)); 這行代碼調(diào)用第二個(gè)函數(shù)generateResponseExcel來生成流文件以及處理返回的Response。

這里需要注意的地方就兩個(gè)：

response.setContentType("application/vnd.ms-excel;charset=utf-8");
response.setHeader("Content-Disposition", "attachment; filename=" + excelName + ".xlsx");

第一行application/vnd.ms-excel說明將結(jié)果導(dǎo)出為Excel

第二行說明提供那個(gè)打開/保存對(duì)話框，將文件作為附件下載

上面就是后臺(tái)的全部代碼了，接下來看一下前端的代碼：

axios({
  method: 'post',
  url: 'http://localhost:19090/exportUser',
  data: {
   email: this.email,
   userIdArray: this.userIdArray,
   startRegisterDate: this.registerStartTime,
   endRegisterDate: this.registerEndTime
  },
  responseType: 'blob'
  }).then((res) => {
  console.log(res)
  const link = document.createElement('a')
  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob);
  let num = ''
  for(let i=0;i < 10;i++){
   num += Math.ceil(Math.random() * 10)
  }
  link.setAttribute('download', '用戶_' + num + '.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  }).catch(error => {
  this.$Notice.error({
   title: '錯(cuò)誤',
   desc: '網(wǎng)絡(luò)連接錯(cuò)誤'
  })
  console.log(error)
  })

這里為了方便做記錄，我是直接在頁面中使用axios發(fā)送了個(gè)post請(qǐng)求。

仔細(xì)看axios請(qǐng)求加了個(gè)responseType: 'blob'配置，這是很重要的

可以看一下請(qǐng)求成功之后返回的數(shù)據(jù)：

可以看到請(qǐng)求返回了一個(gè)Blob對(duì)象，你如果沒有正確的加上responseType: 'blob'這個(gè)參數(shù)，返回的就不是個(gè)Blob對(duì)象，而是字符串了。

接下來就是將返回的Blob對(duì)象下載下來了：

 const link = document.createElement('a')
  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob);
  let num = ''
  for(let i=0;i < 10;i++){
   num += Math.ceil(Math.random() * 10)
  }
  link.setAttribute('download', '用戶_' + num + '.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)

上面這段代碼重要的就一句：let blob = new Blob([res.data],{type: ‘a(chǎn)pplication/vnd.ms-excel'});

其余的看看就行了。

以上就是全部的Vue導(dǎo)出Excel前后端代碼了。

導(dǎo)入Excel功能

其實(shí)對(duì)于這個(gè)導(dǎo)入Excel沒有什么好說的，就和你沒采用前后分離時(shí)使用SpringMVC導(dǎo)入Excel表格一樣。Vue前端導(dǎo)入Excel代碼和Vue上傳圖片的代碼沒有區(qū)別，就是將Excel文件傳到后臺(tái)，之后就是后臺(tái)處理文件的邏輯了，這個(gè)就不具體寫了，因?yàn)楹鸵郧皼]區(qū)別。

關(guān)于“如何解決Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享文章：如何解決Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel的問題
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article8/podiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、ChatGPT、建站公司、搜索引擎優(yōu)化、域名注冊(cè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)