使用js调用接口导出excel

使用js调用接口导出Excel

以下是使用JavaScript调用接口导出Excel文件的一般流程：

客户端向服务器发送请求，请求后端生成Excel文件；

服务器响应该请求，执行Excel生成操作，并将文件数据返回给客户端；

客户端接收到Excel文件数据，使用Blob对象创建二进制对象，然后使用URL.createObjectURL()方法创建URL；

将URL作为超链接添加到DOM文档中以便用户下载。

具体代码如下：

// 给下载按钮绑定“点击”事件
document.getElementById("downloadBtn").addEventListener("click", function(){// 发送后端请求，参数中指定下载类型为Excelfetch('/export', {method: 'POST', data: { type: 'excel' }}).then(function(res){return res.blob(); // 获取Excel文件的二进制数据}).then(function(blob){var url = window.URL.createObjectURL(blob); // 构造Excel文件的URLvar a = document.createElement('a');a.href = url;a.download = 'data.xlsx'; // 指定下载文件名document.body.appendChild(a);a.click(); // 模拟鼠标点击下载window.URL.revokeObjectURL(url); // 释放URL对象});
});

这里采用了fetch()函数来向服务器发送POST请求，并将Excel文件数据转化成blob对象。之后使用createElement()方法动态创建一个超链接元素，将URL地址和下载文件名设置好并把它添加到body中，并模拟鼠标的点击操作来下载文件。最后释放URL对象，减小内存使用。

使用js调用接口导出excel相关推荐

Vue - 调用接口导出 excel 表格至本地
调用后台接口返回的数据: 代码: // 接口地址 axios.post("/project/download",{type: this.params.type,},{respons ...
swagger接口导出excel文件打不开
swagger接口导出excel文件打不开: 接口添加produces="application/octet-stream" @ApiOperation(value = " ...
js 调用php 导出表格,[拿来主义]使用layui纯JS导出html页面中的table为excel
使用场景: 将当前html页面中table的数据导出为excel(分析:页面无分页,不用再查数据库,直接使用js插件导出数据即可) js代码: layui.config({ base: '{$Thin ...
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...
如何通过js调用接口
例如一个接口的返回值如下: var returnCitySN = {"cip": "221.192.178.158", "cid": &qu ...
js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
js前端导出excel,网上的例子很多,大部分都是使用如下代码: //统计导出$scope.statisExport=function(){toOutPutExcel('statisTable', ' ...
js实现导入导出Excel（结合js-xlsx）
本文是单纯用前端实现导入导出Excel的功能. 说明: 1.导入要求导入的数据是文本格式. 2.导出是导出json数据到excel文件 demo的githup地址:https://github.com ...
vue基于Blob.js和Export2Excel.js做前端导出excel兼容ie
这里简单的说一下兼容ie的想法,至于vue怎么使用这两个文件做导出excel这里不加叙述,不会的请自动百度或评论私聊. 对于这个问题的产生,我有两种猜想供讨论,有兴趣的可以验证下是由于ie的版本产生 ...
JAVA导出Excel到浏览器_多个浏览器下应用前端JS实现一键导出excel表
1 2 3 4 5 导出表格 6 7 varTmr;8 functiongetExplorer() {9 varexplorer=window.navigator.userAgent ;10 //ie ...

使用js调用接口导出excel

使用js调用接口导出Excel

使用js调用接口导出excel相关推荐

最新文章

热门文章