react、vue、js实现文件下载导出（iframe，form,a标签）

项目中用到下载导出功能实现：

 第一、二、三种方法是通用方法，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);    // 然后移除});

文件名必须要和你下载得文件后缀名一致。要不然下载下来打不开。 

2023-05-31补充：

上面的方法有些问题，传了文件名会导致文件损毁。所以把filename去掉了

 const downloadFile = (fileurl) => { //fileurl文件地址（一般是接口返回）const a = document.createElement('a');a.style.display = 'none';a.href = fileurl;document.body.appendChild(a);a.click();document.body.removeChild(a);};

第三中方法：

form表单

exportCallBack = (fileUrl) => {var bodyElement = document.body; //获取bodyvar divElement = document.createElement("div"); //创建divvar downloadUrl = fileUrl; //文件地址divElement.innerHTML = `
` //form标签bodyElement.appendChild(divElement); //追加到bodydocument.getElementById("formBox").submit(); //自动提交表单bodyElement.removeChild(divElement); //移除form}

react里专用的方法（显得很鸡肋）：

这个方法很麻烦，需要先引入

 import ReactDOM from "react-dom";

然后再项目中跟组件加上这一行或者在使用的组件，render里加上这一行

exportCallBack = (fileUrl) => {var divElement = document.getElementById('exportBoxBank'); //获取div  也可以用ref获取var downloadUrl = fileUrl; //文件地址ReactDOM.render(
, 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(
, divElement);document.getElementById("formBox").submit(); //自动提交表单ReactDOM.unmountComponentAtNode(divElement) //ReactDOM.unmountComponentAtNode()方法，参数为一个结点，调用方法会卸载该容器中的渲染}exportFile=()=>{//点击导出//一般都是先请求接口获取到文件地址然后调用事件(涉及跨域的使设置用代理解决)this.exportCallBack(url);}render() {return (导出{/* 放到末尾 */} );}
}export default Index9;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！