原生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>


相关文章
|
10月前
|
Web App开发 存储 数据处理
Chrome 下载大文件报错!用 Streamsaver.js 完美填坑
本文探讨了Chrome下载大文件报“网络错误”的原因及解决方案。由于Chrome对Blob数据有大小限制,导致大文件下载失败。通过将responseType改为ArrayBuffer可临时解决1-2G文件问题,但超3G仍会崩溃。最佳方案是使用Streamsaver.js实现流式下载,边接收边保存,避免内存溢出,完美支持超大文件下载。
5089 3
Excel中如何批量重命名工作表与将每个工作表导出到单独Excel文件
本文介绍了如何在Excel中使用VBA批量重命名工作表、根据单元格内容修改颜色,以及将工作表导出为独立文件的方法。同时提供了Python实现导出工作表的代码示例,适用于自动化处理Excel文档。
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 算法 安全
使用CodeBuddy实现批量转换PPT、Excel、Word为PDF文件工具
通过 CodeBuddy 实现本地批量转换工具,让复杂的文档处理需求转化为 “需求描述→代码生成→一键运行” 的极简流程,真正实现 “技术为效率服务” 的目标。感兴趣的快来体验下把
994 10
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
736 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
JavaScript 前端开发
Node.js 中实现多任务下载的并发控制策略
Node.js 中实现多任务下载的并发控制策略
628 15
|
文字识别 Serverless 开发工具
【全自动改PDF名】批量OCR识别提取PDF自定义指定区域内容保存到 Excel 以及根据PDF文件内容的标题来批量重命名
学校和教育机构常需处理成绩单、报名表等PDF文件。通过OCR技术,可自动提取学生信息并录入Excel,便于统计分析和存档管理。本文介绍使用阿里云服务实现批量OCR识别、内容提取、重命名及导出表格的完整步骤,包括开通相关服务、编写代码、部署函数计算和设置自动化触发器等。提供Python示例代码和详细操作指南,帮助用户高效处理PDF文件。 链接: - 百度网盘:[链接](https://pan.baidu.com/s/1mWsg7mDZq2pZ8xdKzdn5Hg?pwd=8866) - 腾讯网盘:[链接](https://share.weiyun.com/a77jklXK)
2920 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
499 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
377 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
253 0

热门文章

最新文章