前端下载文件（导出）的三种方式-CFANZ编程社区

1.情景展示

在开发过程中，我们经常会遇到文件下载（图片等）和文件导出（excel等）功能；

除了后端层面之外，前端如何进行请求的发送与接收返回的文件流（数据流）？

2.具体分析

通过a标签来实现。

3.解决方案

前提条件：我想要下载一个文件，并且后端已经提供好了接口。

方式一：最简单

条件1：在发送请求前已经拿到了请求地址，并且确定要传的参数；

条件2：一般情况下，后端是要前端发送请求参数的，我们可以通过get请求携带过去就可以了。

但是，需要注意：参数值不能过长（不能超过get请求允许的URL长度字节）。

最简单，不用携带参数，直接访问文件所在地址；

<a href="http://127.0.0.1:8080/demo/download/test.zip" target="_blank">下载插件</a>

不访问文件地址，携带较少参数。

<a href="http://127.0.0.1:8080/demo/download.do?path=WEB-INF/uploadFile&name=aa.png" target="_blank">下载图片</a>

方式二：不常见

不与后台进行交互，直接从页面上取数据进行导出。

通过js创建a标签；

根据数据逆向生成URL对象；

将a标签添加到页面上，并触发点击事件，从而实现下载功能。

// 导出SQL语句
this.exportSql = function () {
  let sqlText= $('#sqlText').val();
  if (sqlText == '') {
    Dialog.Alert('消息提示', '请录入查询语句');
    return;
  }
  
  let url = URL.createObjectURL(new Blob([sqlText]));
  let a = document.createElement('a');
  a.href = url；
  a.download = 'sql_' + new Date().getTime() +'.sql';
  document.body.appendChild(a);
  a.click();// 通过点击事件触发下载
  document.body.removeChild(a);
};

方式三：常见

// 导出查询语句
this.export = function() {
  var exportFormat= $('#exportFormat').val();
  if (exportFormat == '') {
    Dialog.Alert('消息提示', '请选择导出格式');
    return;
  }
  
  var sqlText= $('#sqlText').val();
  if (sqlText == '') {
    Dialog.Alert('消息提示', '请录入查询语句');
    return;
  }
  
  var ListContainerHTML= $('#ListContainer').html();
  if (ListContainerHTML == '') {
    Dialog.Alert('消息提示', '请录入查询语句并执行');
    return;
  }
  
  // 添加Cookie
  var cookie = new Cookie();
  var sqlCookieName = new Date().getTime();
  
  cookie.SetCookie("typlat" + sqlCookieName, sqlText, 1);// 有效期：1天
  
  var DATABASEID = $('#DATABASEID').val();
  var exportFormat = $('#exportFormat').val();
  let suffix;
  if ('excel' == exportFormat) {
    suffix = '.xls';
  } else if ('csv' == exportFormat) {
    suffix = '.csv';
  } else if ('json' == exportFormat) {
    suffix = '.json';
  } else {
    
  }
  
  let param = 'sqlName=' + sqlCookieName + '&DATABASEID=' + DATABASEID + '&exportFormat=' + exportFormat;
  let url = baseUrl + '/metadata/sql/viewList2.do?' + param;
  let a = document.createElement('a');
  a.href =  url;
  a.download = exportFormat + '_' + sqlCookieName + suffix
  
  document.body.appendChild(a); 
  a.click();// 通过点击事件触发下载
  document.body.removeChild(a);
  
};

数据通过js拿到，将要传到后台的参数；

大数据不能通过get请求进行传送，我们可以通过cookie来实现数据的携带；

后续流程与方式二一致。

4.拓展

new Blob(array, options)

前端下载文件（导出）的三种方式_Text

URL.createObjectUrl(object)

前端下载文件（导出）的三种方式_WEB开发_02

5.js导出文本的三种方式

方式一：根据文字生成URL对象完成下载；

let url = URL.createObjectURL(new Blob(["需要导出的文字"]));
let a = document.createElement('a');
a.href =url;
a.download = '文件名.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

方式二：通过a标签指定文本格式和编码直接下载；

function downloadTxt(fileName, content) {
    let a = document.createElement('a');
    a.href = 'data:text/plain;charset=utf-8,' + content;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

方式三：通过FileReader转化为base64字符串下载。

function downloadByBlob (fileName, content) {
    let blob = new Blob([content], {
        type: "text/plain;charset=utf-8"
    });
    let reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function(e) {
        let a = document.createElement('a');
        a.download = fileName;
        a.href = e.target.result;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！