项目中用到下载导出功能实现:
第一、二、三种方法是通用方法,vue\react\js都可以使用,当然也有react专用的(实际上是react的方法实现)。
一般都是从接口获取到文件地址,然后调用下面的方法即可,如果下载多个文件就只能循环调用了。
第一种方法:
iframe实现
只需要传一个文件下载地址的url即可
downloadFile = (url) => {//下载方法
console.log(url)
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影响页面
iframe.style.height = 0; // 防止影响页面
iframe.src = url;
document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
// 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧)
setTimeout(() => {
iframe.remove();
}, 5 * 60 * 1000);
}
第二种方法:
a标签
downloadFile = ((fileurl, filename) => { //fileurl文件地址(一般是接口返回) filename文件下载后的名字
console.log("3333")
var a = document.createElement('a');
a.download = filename; //下载后文件名
a.style.display = 'none';
var blob = new Blob([fileurl]); // 字符内容转变成blob地址 二进制地址
a.href = URL.createObjectURL(blob);
document.body.appendChild(a);
a.click(); // 触发点击
document.body.removeChild(a); // 然后移除
});
第三中方法:
form表单
exportCallBack = (fileUrl) => {
var bodyElement = document.body; //获取body
var divElement = document.createElement("div"); //创建div
var downloadUrl = fileUrl; //文件地址
divElement.innerHTML = `<form action=${downloadUrl} method="post" id="formBox"></form>` //form标签
bodyElement.appendChild(divElement); //追加到body
document.getElementById("formBox").submit(); //自动提交表单
bodyElement.removeChild(divElement); //移除form
}
react里专用的方法(显得很鸡肋):
这个方法很麻烦,需要先引入
import ReactDOM from "react-dom";
然后再项目中跟组件加上这一行或者在使用的组件,render里加上这一行
<div id="exportBoxBank"></div>
exportCallBack = (fileUrl) => {
var divElement = document.getElementById('exportBoxBank'); //获取div 也可以用ref获取
var downloadUrl = fileUrl; //文件地址
ReactDOM.render(<form action={downloadUrl} method="post" id="formBox"></form>, divElement);
document.getElementById("formBox").submit(); //自动提交表单
ReactDOM.unmountComponentAtNode(divElement) //ReactDOM.unmountComponentAtNode()方法,参数为一个结点,调用方法会卸载该容器中的渲染
}
大致的伪代码:
import React, { Component } from 'react';
import ReactDOM from "react-dom";
class Index9 extends Component {
exportCallBack = (fileUrl) => {
var divElement = document.getElementById('exportBoxBank'); //获取div 也可以用ref获取
var downloadUrl = fileUrl; //文件地址
ReactDOM.render(<form action={downloadUrl} method="post" id="formBox"></form>, divElement);
document.getElementById("formBox").submit(); //自动提交表单
ReactDOM.unmountComponentAtNode(divElement) //ReactDOM.unmountComponentAtNode()方法,参数为一个结点,调用方法会卸载该容器中的渲染
}
exportFile=()=>{//点击导出
//一般都是先请求接口获取到文件地址然后调用事件(涉及跨域的使设置用代理解决)
this.exportCallBack(url);
}
render() {
return (
<div>
<button onClick={exportFile}>导出</button>
{/* 放到末尾 */}
<div id="exportBoxBank"></div>
</div>
);
}
}
export default Index9;