前端下載項目中的資源文件或者是服務器中的文件，同時解決文件名中文亂碼問題

場景：

        今天完善項目時，需要用到模板下載功能，模板我是放在 resource/static 下，然後覺得沒必要走後端下載，浪費服務器資源，想直接通過前端調用瀏覽器下載，經過win10的edge和Chrome瀏覽器測試，達到我的預期要求： 前端下載 和 解決文件名中文亂碼問題 ，但變態IE還是不支持，很可惜，因爲客戶也幾乎不用IE，所有這個對我本次影響不大，到時提醒下客戶就好，特此記錄下。

      

功能實現：

第一種：

      項目中的待下載資源文件命名還是要非中文，然後通過 a標籤的 download 屬性進行重命名

      1. 模板文件要放在 resource/static 下，這樣就可以直接通過url的方式進行下載，直接放在resource 下，雖然也可以下載，但是打開excel後提示 "Excel 無法打開文件XXXX ，因爲文件已損壞……"，放到 resource/static 就可以正常打開

      2.前端html頁面使用 a 標籤，a 標籤的href直接指向 resource/static 下的文件位置

     3. a 標籤中增加 download 屬性，這個可以對下載文件重命名，達到解決文件名中文出現亂碼問題

     具體代碼如下，爲了頁面好看，我在A標籤外包了一層 bootstrap的button

<div class="btn-group" style="float: right">
                <button type="button" name="downTemplate" id="downTemplate" class="btn btn-link">
                    <a th:href="@{{path}/static/download/V20190705.xlsx(path=${#httpServletRequest.getContextPath()})}" download="會員導入模板.xlsx">會員導入模板下載</a>
                </button>
            </div>

頁面效果：

觸發的Chrome瀏覽器下載

點擊  會員導入模板下載，就可以直接觸發瀏覽器的下載功能，下載 a 標籤中 href 指向的文件，並根據 download 中設定的值，對文件進行重命名。

 

第二種：

         第二種方法只是對網上大佬的總結，具體可以看我的另一篇轉載 https://blog.csdn.net/sinat_35626559/article/details/92374345 同樣能實現前端下載，我這邊做得是圖片下載

var downAttachment = function() {
    var x=new XMLHttpRequest();
    x.open("GET", "文件請求路徑", true);
    x.responseType = 'blob';
    x.onload=function(e){
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = ''     //文件下載名稱，重命名使用，不填默認爲的原文件名稱
        a.click()
    }
    x.send();
}

文件請求路徑：你當前項目查看附件的方法

download: 文件下載後的名稱，可以用來重命名，不填默認爲原文件名稱