资讯专栏INFORMATION COLUMN

js导出excel

wangxinarhat / 2508人阅读

摘要:当然可以自定义简单的下载文件实现方式下载绑定标签模拟点击实现下载延时释放用来释放这个这里的数据是用来定义导出的格式类型格式格式格式格式格式通过转成单页数据调用方式的上级的值保存的文件名称


    


function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式
        var tmpa = document.createElement("a");
        tmpa.download = fileName || "下载";
        tmpa.href = URL.createObjectURL(obj); //绑定a标签
        tmpa.click(); //模拟点击实现下载
        setTimeout(function () { //延时释放
            URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
        }, 100);
    }

    const wopts = { bookType: "xlsx", bookSST: false, type: "binary" };//这里的数据是用来定义导出的格式类型
    // const wopts = { bookType: "csv", bookSST: false, type: "binary" };//ods格式
    // const wopts = { bookType: "ods", bookSST: false, type: "binary" };//ods格式
    // const wopts = { bookType: "xlsb", bookSST: false, type: "binary" };//xlsb格式
    // const wopts = { bookType: "fods", bookSST: false, type: "binary" };//fods格式
    // const wopts = { bookType: "biff2", bookSST: false, type: "binary" };//xls格式

    function downloadExl(data, name) {
        const wb = { SheetNames: ["Sheet1"], Sheets: {}, Props: {} };
        wb.Sheets["Sheet1"] = XLSX.utils.json_to_sheet(data);//通过json_to_sheet转成单页(Sheet)数据
        saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), name + "." + (wopts.bookType=="biff2"?"xls":wopts.bookType));
    }
    function s2ab(s) {
        if (typeof ArrayBuffer !== "undefined") {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        } else {
            var buf = new Array(s.length);
            for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
    }
    function downloadXLSById(idName,fileName){
        var title = new Array();

        $(`#${idName} table thead tr th`).each(function(i,v){
            title.push(v.textContent);
        });

        var jsonData = [];
        $("#"+idName+" table tbody tr").each(function(i,v){
            var data = {};
            v.childNodes.forEach(function(value,index){
                data[title[index]] = $.trim(value.textContent);
            });
            jsonData.push(data);
        });

        downloadExl(jsonData,fileName);
    }
调用方式
downloadXLSById(idName,fileName);
idName : table 的上级div的 id值
fileName : 保存的文件名称

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108821.html

相关文章

  • FineReport中JS如何自定义按钮导出

    FineReport支持多种不同的导出方式,直接使用FineReport内置导出按钮可以非常快捷方便的来对各种格式的输出,但是我们在web页面集成中的时候,往往只想将报表内容嵌入到iframe中,而工具栏以及工具栏上的按钮都会隐藏掉,而使用web页面自定义的按钮,那么,此时,这种自定义按钮如何实现导出呢? showImg(https://segmentfault.com/img/bVJR1H?w=...

    wujl596 评论0 收藏0
  • Vue+Element前端导入导出Excel

    摘要:前言业务场景由前台导入表格,获取批量数据。根据一个数组导出表格。每一个值是个对象,包含了两个属性。由于本人将和放到了同一级,这里引入是这样的。这几个文件不支持引入,所以需要来将他们挂载到全局环境下。若不足之处,欢迎大家指出,共勉。 1 前言 1.1 业务场景 由前台导入Excel表格,获取批量数据。 根据一个数组导出Excel表格。 2 实现原理 2.1 引入工具库 file-save...

    NikoManiac 评论0 收藏0
  • vue.js中如何导出Excel表格

    摘要:有一个项目需求,要求在前端项目中导出表格,经过查找代码确实可以实现,具体实现步骤为安装依赖导入两个下载和,在目录下新建文件夹,里面放入和两个文件在引入这两个文件在组件中使用导出的方法序号昵称姓名上面设置的表格第一行的标题上面的是里对 有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1.安装依赖 npm install -S ...

    lunaticf 评论0 收藏0
  • Vue导出json数据到Excel电子表格

    摘要:网上看了很多文档感觉都不全,这里写一篇完整的详细教程。一安装依赖前面基本一样二下载两个所需要的文件和。是每一栏的名称,需手动输入。是中的值,也是要自己写的。这里记得要与里面的名称对应这里可定义导出的文件名参考文章 网上看了很多文档感觉都不全,这里写一篇完整的详细教程。 一、安装依赖(前面基本一样) npm install file-saver --save npm install xl...

    DirtyMind 评论0 收藏0
  • Vue导出json数据到Excel电子表格

    摘要:网上看了很多文档感觉都不全,这里写一篇完整的详细教程。一安装依赖前面基本一样二下载两个所需要的文件和。是每一栏的名称,需手动输入。是中的值,也是要自己写的。这里记得要与里面的名称对应这里可定义导出的文件名参考文章 网上看了很多文档感觉都不全,这里写一篇完整的详细教程。 一、安装依赖(前面基本一样) npm install file-saver --save npm install xl...

    233jl 评论0 收藏0
  • 利用js-xlsx前端导出Excel

    摘要:由于项目临时加入导出功能,后台童靴没有多余时间来处理,想前端来处理导出。查询了前端导出方法,大部分是利用来做处理,按照来导出时是没有样式处理的。利用数据导出拿到后端数据,先要对数据进行组装才能导出我们想要的文件格式。 由于项目临时加入导出Excel功能,后台童靴没有多余时间来处理,想前端来处理导出。 查询了前端导出方法,大部分是利用js-xlsx来做处理,按照js-xlsx来导出exc...

    muzhuyu 评论0 收藏0

发表评论

0条评论

wangxinarhat

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<