在前端对Excel文件进行下载

业务要求：后台提供下载excel接口，在前端对接口进行访问并下载excel

方法一：

直接使用window.href打开接口进行下载，代码如下

window.location.href = "url"//url就是后台提供的下载地址

优点：简单缺点：window.href 打开一个接口时，浏览器会中止当前页面的加载，并立即导航到新的页面。因此，如果你多次使用
window.href 打开不同的接口，只有最后一次被成功加载，之前的请求都会被取消。

解决方法：使用 XMLHttpRequest 或 Fetch API
来进行异步请求，这样可以在不影响页面加载的情况下发送多个请求，并获取所有的响应结果。

方法二：

使用 XMLHttpRequest 来进行异步请求，代码如下：

var xhr = new XMLHttpRequest();
//放问接口，这里的第三个参数表示该请求是异步请求。如果设置为 false，则是同步请求，这样会阻塞页面并等待服务器响应后才继续执行后面的代码。
xhr.open('GET', 'url', true);
//类型
xhr.responseType = 'arraybuffer';
//进行下载
xhr.onload = function () {//判断接口状态if (this.status === 200) {// 获取请求头的内容var contentDisposition = xhr.getResponseHeader('Content-Disposition');// 对名称进行保存// var fileName = contentDisposition.match(/filename="(.*?)"/)[1];// 这个方法就是给他一个文件名，可以给一个固定的字符串比如‘文件’var fileName = contentDisposition.match(/filename=([^;\n\r]+)/)[1];// URL编码后的文本，需要使用URL解码来将其转化为中文。let decodedString = decodeURIComponent(urlEncodedString);console.log("转译后的名称:",decodedString); var blob = new Blob([this.response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});//创建连接var link = document.createElement('a');// 对href进行赋值link.href = window.URL.createObjectURL(blob);// 对名称下载的进行赋值link.download = fileName;//模拟点击方法link.click();}
};
//发送请求
xhr.send();

小知识：

match()方法：

在JavaScript中，match()方法是一个用于在字符串中查找一个正则表达式匹配的函数。该方法可以接收一个正则表达式作为参数，也可以接收一个字符串作为参数。当参数是正则表达式时，它会在原始字符串中查找与正则表达式匹配的子串，并返回一个数组；如果没有找到匹配的内容，则返回null。当参数是字符串时，则会将该字符串转化为正则表达式进行匹配操作。

/filename=“(.*?)”/这是什么意思？

这是一个JavaScript正则表达式，用于匹配HTML中的或等元素中指定的文件名。具体而言，它使用了如下的语法：
/：表示正则表达式的开始和结束符号；
filename=" :匹配输入字符串中以filename="开头的部分；
(.?) : 是一个捕获组，表示要匹配的文本内容；
. (贪心地匹配任意字符)；?(
使其变成惰性匹配，这样它就只会匹配最少的字符)；
": 匹配输入字符串中的引号。
综合起来，这个正则表达式可以从一个HTML字符串中获取第一个出现的 filename=“xxxxx” 这样的内容，其中 “xxxxx”> 表示对应的文件名。

url乱码解码，如何将%E4%BB%BB%E5%8A%A102的乱码恢复成中文？

这是URL编码后的文本，需要使用URL解码来将其转化为中文。URL解码可以使用JavaScript自带的decodeURIComponent()函数或者在线工具进行。
以下是使用JavaScript的示例代码：

 let urlEncodedString = '%E4%BB%BB%E5%8A%A102'; let decodedString = decodeURIComponent(urlEncodedString); console.log(decodedString); // 输出：任務02

解码后的结果为"任務02"。请注意，如果原始的字符串中含有其他字符（例如+），则可能需要在解码之前进行额外的处理。

在前端对Excel文件进行下载相关推荐

Asp.net生成Excel文件并下载（解决使用迅雷下载页面而不是文件的问题）
这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 先试用Response.WriteFile的方法: FileInfo fi = new FileInfo(excelFile); ...
前端解析Excel文件js-xlsx与bootstrapTable
前端解析Excel文件js-xlsx与bootstrapTable 1.引入xlsx.js 2.上传Excel按钮 3.读取Excel文件 4.结果 1.引入xlsx.js <script sr ...
【原】Asp.net生成Excel文件并下载（更新：解决使用迅雷下载页面而不是文件的问题）...
这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 生成Excel文件的方法,见:[原].Net创建Excel文件(插入数据.修改格式.生成图表)的方法先试用Response.W ...
Asp.net输出Excel文件并且下载该文件以及某些细节问题解决
使用asp.net输出Excel文件并且下载,网上资源很多我也是参照网上资源写的简单流程,就是页面上方一个datagrid控件或者gridview控件,后来绑定数据到控件上,然后输出控件呈现的ht ...
java迅雷下载excel,Asp.net生成Excel文件并下载（更新：解决使用迅雷下载页面而不是文件的问题）...
(一) 如果在迅雷的下载对话框中点取消,则会使用IE的下载,这里的文件又是正确的了: 怀疑迅雷是根据下载对话框中的网址重新请求下载,与发起请求的页面已经无关,而IE又不会把ViewState信息传到迅 ...
Asp.net生成Excel文件并下载（更新：解决使用迅雷下载页面而不是文件的问题）...
这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 生成Excel文件的方法,见:[原].Net创建Excel文件(插入数据.修改格式.生成图表)的方法先试用Response.W ...
前端实现excel文件的导入导出
前端实现excel文件的导入导出导入文件导出文件导入文件 html: <el-dropdown v-waves @command="handleBatchCommand" ...
JavaScript纯前端解析Excel文件
最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入.我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及 ...
前端读取Excel文件（使用js-xls插件）
前言: 由于项目需要,现在要用户在上传文件之后,页面能实时.即不通过服务器就能读取到excel的表头关键字,就像上传图片实时预览一样,将关键字展示到页面上. 官方例子: 使用js-xls插件,亲测IE ...

在前端对Excel文件进行下载

业务要求：后台提供下载excel接口，在前端对接口进行访问并下载excel

方法一：

方法二：

小知识：

在前端对Excel文件进行下载相关推荐

最新文章

热门文章