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

 

 

来源：https://www.cnblogs.com/sunxiaopei/p/12674973.html