根據Blob流（即后端的Stream文件類型格式）下載文件

接口調用

先看看這個接口的返回值

 

 

 

前端處理

//根據文件后綴名來映射Blob Type
const typeDic = {
    docx: 'application/msword',
    doc: 'application/msword',
    bin: 'application/octet-stream',
    exe: 'application/octet-stream',
    so: 'application/octet-stream',
    dll: 'application/octet-stream',
    pdf: 'application/pdf',
    ai: 'application/postscript',
    xls: 'application/vnd.ms-excel',
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ppt: 'application/vnd.ms-powerpoint',
    dir: 'application/x-director',
    js: 'application/x-javascript',
    swf: 'application/x-shockwave-flash',
    xhtml: 'application/xhtml+xml',
    xht: 'application/xhtml+xml',
    zip: 'application/zip',
    mid: 'audio/midi',
    midi: 'audio/midi',
    mp3: 'audio/mpeg',
    rm: 'audio/x-pn-realaudio',
    rpm: 'audio/x-pn-realaudio-plugin',
    wav: 'audio/x-wav',
    bmp: 'image/bmp',
    gif: 'image/gif',
    jpeg: 'image/jpeg',
    jpg: 'image/jpeg',
    png: 'image/png',
    css: 'text/css',
    html: 'text/html',
    htm: 'text/html',
    txt: 'text/plain',
    xsl: 'text/xml',
    xml: 'text/xml',
    mpeg: 'video/mpeg',
    mpg: 'video/mpeg',
    avi: 'video/x-msvideo',
    movie: 'video/x-sgi-movie'
};

/**
 * 根據Blob下載文件（Blob即后端的Stream文件類型格式）
 * @params fileName文件名,比如‘2021屆學生.xlsx’
 * @params fileBlob文件
 */
export const downFileBlob = (fileName, fileBlob) => {
    const fileNameGroup = fileName.split('.');
    const fileType = fileNameGroup[fileNameGroup.length - 1].toLowerCase();
    const blob = new Blob([fileBlob], { type: typeDic[fileType] });//處理文檔流
    const elink = document.createElement('a');
    elink.download = fileName;
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 釋放URL 對象
    document.body.removeChild(elink);
}


/*
* 下載按鈕點擊
*/
const btnClick = async () => {
    const result = await axios({
        url: 'http://localhost:8000/api/v1/excel/template',
        params: { sceneId: 527 },
        responseType: 'blob' // 一定要加，不然下載的文件打開亂碼
    });
    // 響應頭里的 content-disposition: attachment;filename=2021屆學生.xlsx
    const fileName = result.headers['content-disposition'].replace('attachment;filename=', '');
    downFileBlob(fileName, result.data);
};