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

查理豪 發表於 2020-4-10 18:11:00

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

一.GET方式下载
方法一：
<div class="cnblogs_code">
<pre><a href={systemPdf} download="application/pptx" target="_blank">下载</a></pre>
</div>
方法二:
<div class="cnblogs_code">
<pre>downloadHandler = () => {
const url = '../action?id=3'
window.location.href = url
}
this.downloadHandler}>下载　</pre>
</div>
缺点：get请求参数数据量较小时可以使用，但如果请求参数数据量较大时，一般使用post
二.POST方式下载
<div class="cnblogs_code">
<pre>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(';').split('='))
 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(';').split('=')); 　　　　　　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(, { 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;</pre>
</div>
点击结果如下：
<img src="https://img2020.cnblogs.com/blog/1853661/202004/1853661-20200410174652150-266430089.png">
 
注意：
<ol>
<li>直接通过ajax的post的方式无法调用浏览器的下载功能</li>
<li>请求时responseType必须设置为：'arraybuffer'，后端一般返回的'content-type': 'application/octet-stream'</li>
</ol>
三：blob格式导出/下载文件
blob流导出/下载相关功能，其中需要导出excel、csv、word、zip压缩文件之类的，在导出/下载相应的文件类需要知道对应的content-type属性，
<table style="height: 157px; width: 714px" border="1" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td>后缀</td>
<td>MIME Type</td>
</tr>
<tr>
<td>.doc</td>
<td>application/msword</td>
</tr>
<tr>
<td>.docx</td>
<td>application/vnd.openxmlformats-officedocument.wordprocessingml.document</td>
</tr>
<tr>
<td>.xls</td>
<td>application/vnd.ms-excel</td>
</tr>
<tr>
<td>.xlsx</td>
<td>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</td>
</tr>
<tr>
<td>.ppt</td>
<td>application/vnd.ms-powerpoint</td>
</tr>
<tr>
<td>.pptx</td>
<td>application/vnd.openxmlformats-officedocument.presentationml.presentation</td>
</tr>
</tbody>
</table>
 
  
来源：https://www.cnblogs.com/sunxiaopei/p/12674973.html

頁: [1]

琼殿技术论坛's Archiver

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