js下载Excel

心已赠人 2022-05-12 07:00 259阅读 0赞

现在前端一直习惯直接使用ajax做页面局部刷新，但是用它来做文件下载是不行的，因为它的响应类型没有流文件，可以通过以下方式实现：

**第一种**：通过get请求的方式实现下载

window.open("http:localhost:8080/v1/download/sheetdata");

这种方式就是通过get请求访问一个URL，参数都拼在url后面来实现。这种方式简单，但是每次都会瞬间打开一个新窗口，不太友好，最重要的是火狐浏览器不支持。

**第二种**：通过XMLHttpRequest实现下载。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

下面就是我用XMLHttpRequest实现下载的代码

function exportData(){
            var index = layer.load(2);
            var showName = "";
            $.ajax({
    			url:visuUrls+"/download/getDownloadName",
    			type:"GET",
    			async:false,
    			data:{"tableName":tableName},
    			dataType:"json",
    			success:function (data) {
    				if(data.code==200){
    				    showName=data.data;
    				}
                },
    			error:function () {
    
                }
    		})
            // 判断下载文件名
    		if(showName==""){
                layer.close(index);
                layer.msg('下载失败', {icon: 2});
                return;
    		}
            var url = visuUrls+"/download/v1/table-data?tableName="+tableName+"&flag="+flag+"&name="+$("input[name='name']").val();
            var xhr = getHttpObj();//创建新的XHR对象
            xhr.open('post', url,true);//指定获取数据的方式和url地址
            xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')
            xhr.responseType = 'blob';//以blob的形式接收数据，一般文件内容比较大
            xhr.onload = function(e) {
                var blob = this.response;//Blob数据
                if (this.status == 200) {
                    if (blob && blob.size > 0) {
                        console.log(xhr.response)
                        var blob = new Blob([xhr.response], {type: 'Files'});
                        var csvUrl = URL.createObjectURL(blob);
                        var link = document.createElement('a');
                        link.href = csvUrl;
                        // 下载xlsx文件
                        link.download = showName+".xlsx";
                        link.click();
                    }
                    layer.close(index);
                }else {
                    layer.close(index);
                    layer.msg('下载失败', {icon: 2});
    			}
            };
            xhr.send(null) //post请求传的参数
        }
        function getHttpObj() {
            var xmlhttp=null;
            if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else{// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }

这种方式最坑的就是IE浏览器不兼容。

关于XMLHttpRequest的兼容性可以参考这篇文章：[你真的会使用XMLHttpRequest吗？][XMLHttpRequest]

**第三种**，通过form表单实现

var $eleForm = $("<form method='post'></form>");
    $eleForm.attr("action",dbUrls+"/v1/download/sheetdata");
    $eleForm.append("<input name='tableName' type='hidden' value='"+table_name+"'>");
    $eleForm.append("<input name='showName' type='hidden' value='"+name_ch+"'>");
    $eleForm.append("<input name='username' type='hidden' value='"+uname+"'>");
    $eleForm.append("<input name='userid' type='hidden' value='"+uid+"'>");
    $(document.body).append($eleForm);
    //提交表单，实现下载
    $eleForm.submit();
    $eleForm.remove();

[XMLHttpRequest]: https://segmentfault.com/a/1190000004322487

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 poi excel 下载

package com.leinovo.qes.portal.modules.report.controller; import io.swagger

墨蓝/ 2022年12月27日 14:15/ 0 赞/ 194 阅读

相关 easyExcel下载Excel

加入依赖： <dependency> <goupId>con.alibaba</groupId> <artifactId>easyexcel</artifactId>

分手后的思念是犯贱/ 2022年12月08日 05:36/ 0 赞/ 288 阅读

相关通过js将table表格数据下载为Excel表格

1.创建用于下载数据的excel\_create.jsp页面 <%@ page contentType="text/html; charset=utf-8" %>

约定不等于承诺〃/ 2022年07月15日 05:17/ 0 赞/ 488 阅读

相关 Excel批量下载

思路：把要下载的文件放到exportExcel目录下，利用url查找是否有改文件，有的话下载，没有的话报错。 ![70][] import

谁借莪１个温暖的怀抱￠/ 2022年05月22日 01:44/ 0 赞/ 270 阅读

相关 Java下载Excel模板

首先阐述一下概念，我这里说的下载EXCEL模板，是指这种情况，比如，用户需要填写一个EXCEL，只需要填写某几列，其余列的数据都存在，这个模板是固定的，不是动态生成的EXCEL

蔚落/ 2022年05月15日 12:54/ 0 赞/ 294 阅读

相关 js下载Excel

现在前端一直习惯直接使用ajax做页面局部刷新，但是用它来做文件下载是不行的，因为它的响应类型没有流文件，可以通过以下方式实现：第一种：通过get请求的方式实现下载

心已赠人/ 2022年05月12日 07:00/ 0 赞/ 260 阅读

相关前端js实现字符串/图片/excel文件下载

在`web`开发中，如果你想让用户下载或者导出一个文件，应该怎么做呢？传统的做法是在后端存储或者即时生成一个文件来提供下载功能，这样的优势是可以做权限控制、数据二次处理，

淩亂°似流年/ 2022年03月19日 14:16/ 0 赞/ 286 阅读

相关 post 下载文件 (excel)

1.为什么要使用sumit post 下载 excel? 最初做下载就知道使用ajax 传参数过去,后发现返回的值那里显示一堆乱码,不触发excle ![cli

我不是女神ヾ/ 2022年03月06日 23:52/ 0 赞/ 396 阅读

相关 SpringBoot之下载Excel

下载下来的Excel报如下错误 ![20190402150147714.png][] ![20190402150230667.png][] 错误内容: Excel 已完成

我就是我/ 2022年02月25日 18:58/ 0 赞/ 279 阅读

相关 js下载后台返回的excel文件流

function download(filename) { var oReq = new XMLHttpRequest();

青旅半醒/ 2021年12月23日 23:11/ 0 赞/ 513 阅读