VUE 瀏覽器文件直接下載，同時解決文件內容中文亂碼問題

 

思路：前端向後端請求下載文件流，後端返回文件流再進行下載

download(fileName){
                let param = {
                    fileName:fileName
                }
                apiDownLoad('/api/downloadFile',param).then(res=>{
                    var blob = new Blob([res],{type: "application/octet-stream"});
                    if (window.navigator.msSaveOrOpenBlob) {//msSaveOrOpenBlob方法返回bool值
                        navigator.msSaveBlob(blob, fileName);//本地保存
                    } else {
                        var link = document.createElement('a');//a標籤下載
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        link.click();
                        window.URL.revokeObjectURL(link.href);
                    }
                })
            }

export function apiDownLoad(url,data){
    return new Promise((resolve) =>{
        axios({
            method:'get',
            url:url,
            params:data,
            responseType:'blob'
        }).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            resolve('error');
        })
    })
}

apiDownLoad是axios封裝了一個get請求，重點配置responseType:'blob'，解決文件內容亂碼。

後臺使用Springboot,JAVA代碼如下：

@GetMapping("/downloadFile")
public ResponseEntity<FileSystemResource> downloadFile(@RequestParam(name = "fileName") String fileName) throws Exception {

    //獲得完整的路徑
    String path="D://share/"+fileName;

    //輸出路徑
    System.out.println("path:"+path);

    File file = new File(path);
    System.out.println("fileName:"+file.getName());
    //處理文件名中文編碼
    String myFileName= URLEncoder.encode(file.getName(), "utf-8");
    HttpHeaders headers = new HttpHeaders();
    headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
    headers.add("Content-Disposition", "attachment; filename=" + myFileName);
    headers.add("Pragma", "no-cache");
    headers.add("Expires", "0");
    headers.add("Last-Modified", new Date().toString());
    headers.add("ETag", String.valueOf(System.currentTimeMillis()));
    return ResponseEntity.ok().headers(headers).contentLength(file.length()).contentType(MediaType.parseMediaType("application/octet-stream")).body(new FileSystemResource(file));

}