一. GET 方式下载
方法一:
<a href={systemPdf} download="application/pptx" target="_blank"> 下载 </a>
方法二:
- downloadHandler = () => {
- const url = '../action?id=3'
- Windows.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) {
- // 可删除 start
- 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, }
- }
- }
- // 可删除 end
- return Ajax({
- method: options.method || "POST",
- url: url,
- data: options.data || {},
- params: options.params || {},
- responseType: options.responseType || 'arraybuffer'
- }).then((res) => {
- if (content) {
- 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);
- console.log(res, "ressss")
- // 这里是发送 Ajax 请求的返回值
- let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 这里表示 xlsx 类型
- if (Windows.navigator.msSaveOrOpenBlob) {
- navigator.msSaveBlob(blob, res.fileName)
- } else {
- let downloadElement = document.createElement('a');
- let href = Windows.URL.createObjectURL(blob); // 创建下载的链接
- downloadElement.href = href;
- downloadElement.download = res.fileName; // 下载后文件名
- document.body.appendChild(downloadElement);
- downloadElement.click(); // 点击下载
- document.body.removeChild(downloadElement); // 下载完成移除元素
- Windows.URL.revokeObjectURL(href); // 释放掉 blob 对象
- }
- };
- //modal end
- //view start
- render = () => {
- return (
- <div>
- <button onClick={this.dowmloadQuery}> 点击并下载 </button>
- </div>);
- }
- //view end
- }
- export default Demo;
点击结果如下:
注意:
直接通过 Ajax 的 post 的方式无法调用浏览器的下载功能
请求时 responseType 必须设置为:'arraybuffer', 后端一般返回的'content-type': 'application/octet-stream'
来源: http://www.bubuko.com/infodetail-3500986.html