Ajax配合後端實現Excel的導出

時間 2020-06-27

標籤 ajax 配合後端實現 excel 導出欄目 Ajax 简体版

原文原文鏈接

1、需求

在咱們的平常開發中，可能常常須要遇到excel的導出，以往excel的導出服務器端都是使用的 GET 方法，可是某些狀況下，服務器端只能使用 POST 方法，那麼咱們有沒有好的方法實現excel的導出呢，而且頁面最好不要刷新。javascript

2、實現思路

一、方案一：咱們可使用ajax拿到服務器端返回的 數據下載流,而後藉助 Blob 對象，在動態的建立一個 a 連接，那麼也能夠實現。二、方案二：動態建立一個 iframe 標籤下載，這種方案能夠POST請求可能就沒法下載了。
三、方案三：頁面上動態的建立一個form而後提交這個form。
此處咱們使用 方案一 即便用 ajax 來實現。html

3、實現步驟

一、ajax請求的發送咱們使用axios庫來完成，axios的responseType須要設置成Blob,默認是json。
二、建立 Blob對象
三、建立a標籤
四、觸發下載動做前端

4、前端代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 文件導出</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button type="button" onclick="exportExcel()">導出</button>

<script type="text/javascript"> function exportExcel() { axios({ method: 'POST', url: "http://localhost:8080/export", timeout: 5000, responseType: 'blob' }).then(function (res) { var data = res.data; var blob = new Blob([data], {type: 'application/octet-stream'}); var url = URL.createObjectURL(blob); var exportLink = document.createElement('a'); exportLink.setAttribute("download","ajax文件下載.xlsx"); exportLink.href = url; document.body.appendChild(exportLink); exportLink.click(); }) } </script>
</body>
</html>
複製代碼