downloadAppendix(fileUrl){
      let params = {};
      params['pathName'] = fileUrl;
      //第一個(gè)參數(shù)是請(qǐng)求方式，第二個(gè)參數(shù)是后端接口的路徑，第三個(gè)參數(shù)是請(qǐng)求攜帶的數(shù)據(jù)（Object類(lèi)型）
      downloadFile('post','/api/download/file',params,null)
},

function downloadEvt(url, fileName ) {
    const el = document.createElement('a');
    el.style.display = 'none';
    el.setAttribute('target', '_blank');
    /**
     * download的屬性是HTML5新增的屬性
     * href屬性的地址必須是非跨域的地址，如果引用的是第三方的網(wǎng)站或者說(shuō)是前后端分離的項(xiàng)目(調(diào)用后臺(tái)的接口)，這時(shí)download就會(huì)不起作用。
     * 此時(shí)，如果是下載瀏覽器無(wú)法解析的文件，例如.exe,.xlsx..那么瀏覽器會(huì)自動(dòng)下載，但是如果使用瀏覽器可以解析的文件，比如.txt,.png,.pdf....瀏覽器就會(huì)采取預(yù)覽模式
     * 所以，對(duì)于.txt,.png,.pdf等的預(yù)覽功能我們就可以直接不設(shè)置download屬性(前提是后端響應(yīng)頭的Content-Type: application/octet-stream，如果為application/pdf瀏覽器則會(huì)判斷文件為 pdf ，自動(dòng)執(zhí)行預(yù)覽的策略)
     */
    fileName && el.setAttribute('download', fileName);
    el.href = url;
    console.log(el);
    document.body.appendChild(el);
    el.click();
    document.body.removeChild(el);
};

// 根據(jù)header里的contenteType轉(zhuǎn)換請(qǐng)求參數(shù)
function transformRequestData(contentType, requestData) {
    requestData = requestData || {};
    if (contentType.includes('application/x-www-form-urlencoded')) {
        // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是對(duì)于數(shù)組參數(shù)的處理
        let str = '';
        for (const key in requestData) {
            if (Object.prototype.hasOwnProperty.call(requestData, key)) {
                str += `${key}=${requestData[key]}&`;
            }
        }
        return encodeURI(str.slice(0, str.length - 1));
    } else if (contentType.includes('multipart/form-data')) {
        const formData = new FormData();
        for (const key in requestData) {
            const files = requestData[key];
            // 判斷是否是文件流
            const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
            if (isFile) {
                for (let i = 0; i < files.length; i++) {
                    formData.append(key, files[i]);
                }
            } else {
                formData.append(key, files);
            }
        }
        return formData;
    }
    // json字符串{key: value}
    return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
}
/**
 * ajax實(shí)現(xiàn)文件下載、獲取文件下載進(jìn)度
 * @param {String} method - 請(qǐng)求方法get/post
 * @param {String} url
 * @param {Object} [params] - 請(qǐng)求參數(shù)，{name: '文件下載'}
 * @param {Object} [config] - 方法配置
 */
export function downloadFile(method = 'get', url, params, config){
    const _method = method.toUpperCase();
    const _config = Object.assign({
        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 請(qǐng)求頭類(lèi)型
        fileName: '未知文件',                                        // 下載文件名(必填，若為空，下載下來(lái)都是txt格式)
        async: true,                                                // 請(qǐng)求是否異步-true異步、false同步
        token: 'token'                                              // 用戶(hù)token
    }, config);

    const queryParams = transformRequestData(_config.contentType, params);
    const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;

    const ajax = new XMLHttpRequest();
    ajax.open(_method, _url, _config.async);
    ajax.setRequestHeader('Authorization', _config.token);
    ajax.setRequestHeader('Content-Type', _config.contentType);
    // responseType若不設(shè)置，會(huì)導(dǎo)致下載的文件可能打不開(kāi)
    ajax.responseType = 'blob';
    // 獲取文件下載進(jìn)度
    ajax.addEventListener('progress', (progress) => {
        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
        const msg = `下載進(jìn)度 ${percentage}%...`;
        // console.log(msg);
    });
    ajax.onload = function () {
        if (this.status === 200 || this.status === 304) {
            // 通過(guò)FileReader去判斷接口返回是json還是文件流
            const fileReader = new FileReader();
            fileReader.onloadend = (e) => {
                if (this.getResponseHeader('content-type').includes('application/json')) {
                    const result = JSON.parse(fileReader.result || '{message: 服務(wù)器出現(xiàn)問(wèn)題，請(qǐng)聯(lián)系管理員}');
                    alert(result.message);
                } else {
                    // 兩種解碼方式，區(qū)別自行百度: decodeURIComponent/decodeURI（主要獲取后綴名，否則低版本瀏覽器會(huì)一律識(shí)別為txt，導(dǎo)致下載下來(lái)的都是txt）
                    let _fileName = this.getResponseHeader('content-disposition').split('filename=')[1];
                    _fileName = decodeURI(encodeURI(_fileName));
                    /**
                     * Blob.type一個(gè)字符串，表明該 Blob 對(duì)象所包含數(shù)據(jù)的 MIME 類(lèi)型。如果類(lèi)型未知，則該值為空字符串。
                     * 對(duì)于pdf：type為application/pdf  同時(shí) a標(biāo)簽 不設(shè)置download屬性, 可以直接預(yù)覽
                     */
                    const blob = new Blob([this.response]);

                    const href = URL.createObjectURL(blob);
                    downloadEvt(href,_fileName);
                    // 釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象
                    URL.revokeObjectURL(href);
                }
            };
            // 調(diào)用readAsText讀取文件，少了readAsText將不會(huì)觸發(fā)onloadend事件
            fileReader.readAsText(this.response);
        } else {
            alert('服務(wù)器出現(xiàn)問(wèn)題，請(qǐng)聯(lián)系管理員');
        }
    };
    // send(string): string：僅用于 POST 請(qǐng)求
    ajax.send(queryParams);
}

package com.example.demo.controller;

import com.alibaba.fastjson.JSONObject;
import com.example.demo.utils.GlobalValueUtil;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
import java.io.FileInputStream;
import java.io.InputStream;

@RestController
@RequestMapping("/download")
public class DownloadFileController {
    @PostMapping("/file")
    public void downloadFile(@RequestBody String params, HttpServletResponse response) {
        //逐一取出前端發(fā)來(lái)的數(shù)據(jù)
        String pathName = JSONObject.parseObject(params).getString("pathName");

        //拼接成完整的路徑
        String fileUrl = GlobalValueUtil.rootPath + pathName;

        ServletOutputStream out =null;
        ByteArrayOutputStream baos = null;
        try {
            //通過(guò)輸入流獲取文件數(shù)據(jù)
            InputStream inStream = new FileInputStream(fileUrl);
            byte[] buffer = new byte[1024];
            int len;
            baos = new ByteArrayOutputStream();
            while ((len=inStream.read(buffer))!=-1){
                baos.write(buffer,0,len);
            }
            //修改下載文件的名字
            response.addHeader("Content-Disposition", "attachment;filename=" + pathName);
            response.addHeader("Content-Length", "" + baos.size());
//            response.setHeader("filename", pathName);
            response.setContentType("application/octet-stream");
            out = response.getOutputStream();
            out.write(baos.toByteArray());

            baos.flush();
            baos.close();
            out.flush();
            out.close();
        }catch (Exception e){
            e.printStackTrace();
        }
//        return ReadFileUtil.readFromIOStream(fileUrl);
    }
}