html下載檔案

最簡單的方式莫過於使用a標籤賦予href下載，或者是window.open，但是卻無法執行post請求、以及在request.headers中放置內容，以下提供一種方式，基於axios

import axios from 'axios'

axios.interceptors.response.use(
    response => {
        if(response.config && response.config.responseType == 'blob') {
            const blob = new Blob([response.data], { type
 
: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet這裡表示xlsx型別
            let filename = 'excel.xls';
            if ('download' in document.createElement('a')) {
                const downloadElement = document
 
.createElement('a');
                let href = ''; 
                if(window.URL) href = window.URL.createObjectURL(blob); 
                else href = window.webkitURL.createObjectURL(blob); 
            　　 downloadElement.href = href;
            　　 downloadElement.download = filename; 
            　　 document
 
.body.appendChild(downloadElement);
            　　 downloadElement.click(); 
            　　 if(window.URL) window.URL.revokeObjectURL(href); 
                else window.webkitURL.revokeObjectURL(href); 
                document.body.removeChild(downloadElement);
            } else {
                navigator.msSaveBlob(blob, filename);
            }
            return;

        }
        return Promise.resolve(response.data);
        /* const { status, config } = response;
        const { onlyHandleSuccess } = config;
        if(!onlyHandleSuccess) return Promise.resolve(response.data);
        else {
            const { success, data, errorCode, errorMsg } = response.data;
            if(success) return Promise.resolve(data);
            else ElementUI.Message.error(errorMsg);
        } */

        /* if(status >= 200 && status < 300) {
            return Promise.resolve(data);
        }
        return Promise.reject(response); */
    },
    error => {
        const { response } = error;
        let message = '異常', status;
        if(!response) message = '請求超時...';
        else {
            message = response.statusText;
            status = response.status;
        }
        return Promise.reject({ message, status });
    }
)

const defaultConfig = {
    baseURL: '',
    mode: 'cors',    
    headers: {
        "your-content": 'test....',
        "Accept": "application/json",   
        "Content-Type": "application/json;charset=utf-8"
    }, 
    responseType: 'json'
    //onlyHandleSuccess: true
}

axios.defaults.timeout = 30000

export const post = (url, data, config) => {
    return axios.post(url, data, Object.assign({}, defaultConfig, config))
}

//demo，請求地址需要返回檔案流
post('your/download/path', { data: 1 }, { responseType: 'blob' });