JS 下載文件兩種方式總結

更多JS實戰，前往：https://www.yuque.com/smallwhy/yyvuqy

下載文件分為兩種形式，哪兩種方式取決於后台；

• 如果后台服務器的靜態目錄有可供下載的靜態資源，后台人員告知你文件路徑，直接window.location.href方式獲取即可；
• 如果后台服務器無可供下載的靜態資源，返回的是一個文件流(response-type: application/octet-stream;charset=UTF-8 )，則使用第二種方式（將文件寫入內存，並且創建a元素，a鏈接href屬性指向內存中的文件，download屬性指向要下載的文件名，模擬a元素的點擊事件，進行下載；）

1、 第一種，后台服務器有靜態資源且是固定的文件名（GET方式下載文件）

window.location.href="http://www.域名/template.xlsx(文件名)"

2、第二種，后台返回文件流

解決辦法一：本地可測試；推薦使用；

第一步：引入axios第三方庫

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

第二步：傳參、調接口，下載文件

axios.post(請求路徑URL, {參數Params}, {
            responseType: 'blob'
          }).then(function(res){
            var blob = res.data;
           // FileReader主要用於將文件內容讀入內存
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            // onload當讀取操作成功完成時調用
            reader.onload = function(e) {
              var a = document.createElement('a');
              // 獲取文件名fileName
              var fileName = res.headers["content-disposition"].split("=");
              fileName = fileName[fileName.length - 1];
              fileName = fileName.replace(/"/g, "");
              a.download = fileName;
              a.href = e.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            }
          });

解決辦法二：form表單提交，本地不可測試；不推薦使用；

var exportForm = $('<form action="/api/cert/download" method="post">\
        <input type="hidden" name="ids" value="'+參數ids值+'"/>\
        </form>');
       $(document.body).append(exportForm);
       exportForm.submit();
       exportForm.remove();