原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。

简介: 原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。

解决上面的问题,请用如下代码:

<script>
    let exportExcel = function (apiUrl, postData, downloadFileName, headers, cb) {
        //apiUrl, postData, downloadFileName, headers, cb(传参说明:接口路径,接口传参,下载文件名,头部信息,回调函数)
        (typeof postData !== 'string') && (postData = JSON.stringify(postData));
        downloadFileName || (downloadFileName = '下载文件.xlsx');//如果.xlsx无法打开就改为.xls后缀名
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLDOM');
        xhr.open('POST', apiUrl, true);
        xhr.responseType = 'blob';
        // 这里的header内容根据具体业务来调整参数:
        xhr.setRequestHeader('cookie', '你的cookie');
        xhr.setRequestHeader('sessionId', '你的sessionId');
        // ----------------------------------------
        xhr.onreadystatechange = function () {
            if (xhr.readySsate === 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    cb && cb(true);//下载成功
                    let blobData = xhr.response;
                    let reader = new FileReader();
                    reader.readAsDataURL(blobData), reader.onload = function (e) {
                        let a = document.createElement('a');
                        a.download = downloadFileName, a.href = blobData.size < 32767 ? e.target.result : URL.createObjectURL(blobData), a.click();
                    };
                } else {
                    cb && cb(false);//下载失败
                }
            } else {
                cb && cb(false);//下载失败
            }
        };
    };
//调用方法:exportExcel(接口路径,接口传参,下载文件名,头部信息,回调函数)
</script>


相关文章
|
5月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
1058 0
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
198 0
|
12月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
466 3
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
409 0
Next.js 实战 (六):如何实现文件本地上传
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
787 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
312 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
251 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
160 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
459 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
302 4

热门文章

最新文章