Js React中post方式下載文件/get方式下載文件

一.GET方式下載

方法一：

<a href={systemPdf} download="application/pptx" target="_blank">下載</a>

方法二:

downloadHandler = () => {
   const url = '../action?id=3'
   window.location.href = url
}
<span onClick={this.downloadHandler}>下載</span>　

缺點：get請求參數數據量較小時可以使用，但如果請求參數數據量較大時，一般使用post

二.POST方式下載

import React from 'react';
const Ajax = require('axios');
//server---start
export function request(url, options, isDemo = true) {

    //可刪除----開始 只為演示用
    if (isDemo) {
        let response = {
            data: {},
            fileName: 'demo.xlsx',
            success: true,
            headers: { 'content-type': 'application/octet-stream', 'content-disposition': 'la=1;fileName=demo.xlsx' },
            responseType: options.responseType
        }
        if (response.headers['content-type'] === 'application/octet-stream') {
            let fileName = decodeURI(response.headers['content-disposition'].split(';')[1].split('=')[1])
            return { data: response.data, success: true, fileName, }
        }
     }

     //可刪除----結束
　　　
　　  let contentType = null;
　　　let fileName = null;
     Ajax.interceptors.response.use(response => {
        if(response.headers['content-type'] === 'application/octet-stream'){
　　　　　　contentType = true;
　　　　　　fileName = docodeURL(response.headers['content-disposition'].split(';')[1].split('=')[1]);
　　　　　　return response
　　　　　}
　　 },error => {
　　　　console.log('error', error)
　　　})
    return Ajax({
        method: options.method || "POST", //請求方式
        url: url, //下載地址
        data: options.data || {}, //請求內容
        responseType: options.responseType || 'arraybuffer' 
    }).then((res) => {
        if (contentType) {
            return { data: res.data, success: true, fileName }
        }
        if (res.success) {
            return { data: res.data, success: true, }
        }
    })
};

export async function downloadQuery(data, responseType = 'arraybuffer') {
    return request("/erp/api/query/data", { method: "POST", data, responseType });
}
  //server---end

class Demo extends React.Component {

    //modal---start
    dowmloadQuery = async (data) => {
        const res = await downloadQuery(data);
        //type：'application/.....'這里是xlsx的類型
        let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, res.fileName)
        } else {
            let downloadElement = document.createElement('a');
            let href = window.URL.createObjectURL(blob); // 創建下載的鏈接
            downloadElement.href = href;
            downloadElement.download = res.fileName; // 下載后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 點擊下載
            document.body.removeChild(downloadElement); // 下載完成移除元素
            window.URL.revokeObjectURL(href); // 釋放掉blob對象
        }
    };
    //modal---end

    //view---start
    render = () => {
        return (
            <div>
                < button onClick={this.dowmloadQuery}>點擊並下載</button>
            </div>);
    }
    //view---end
}
export default Demo;

點擊結果如下：

 

注意：

1. 直接通過ajax的post的方式無法調用瀏覽器的下載功能
2. 請求時responseType必須設置為：'arraybuffer'，后端一般返回的'content-type': 'application/octet-stream'

三：blob格式導出/下載文件

blob流導出/下載相關功能，其中需要導出excel、csv、word、zip壓縮文件之類的，在導出/下載相應的文件類需要知道對應的content-type屬性，

后綴	MIME Type
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation