点击导出所选数据(原生js)

简介: 点击导出所选数据(原生js)

这里采用的是a标签的形式导出的(比较方便)

//设置变量和数组来进行所选数据的导出
//想要导出的总数据(接口返回的数据)
let datas;
//想要导出的部分数据
let arr_arr = [];
//点击事件
function elext() {
//初始化一下数组
    arr_arr = []
//将所选的数据push到数组里面
    for (let i = 0; i < $('.radio').length; i++) {
        if ($('.radio').eq(i).prop('checked') == true) {
            arr_arr.push(dat[i])
        }
    }
    console.log(arr_arr);
//判断有没有东西,没有的话导出全部数据,有就导出选择的数据
    if (arr_arr.length == 0) {
        //定义表头
        let str =
            '多选ID,序号,工资日期,员工姓名,公共性质,职务,薪水等级,岗位标准工资,安全标准工资,岗位标准津贴,绩效奖金,应出勤天数,实际出勤天数,岗位工资,安全质量奖金,岗位津贴,绩效奖金,证书补贴,通讯补贴,电脑补贴,夜班补贴,加班补贴,误餐补贴,租房补贴,高温补贴,取暖补贴,外出施工补贴,奖金,其他补助,扣款,应发小计,个人社保,个税,实发小计,单位社保,管理费,合计金额,电话,身份证号,银行卡,项目id,项目名称,操作\n';
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < datas.length; i++) {
            for (let item in datas[i]) {
                str += `${datas[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "工资报表.csv";
        link.click();
    } else {
//删除所不需要的数据
        for (let i = 0; i < arr_arr.length; i++) {
            delete arr_arr[i].grade_fixed;
            delete arr_arr[i].bz_wages_fixed;
        }
        //定义表头
        let str =
            '多选ID,序号,工资日期,员工姓名,公共性质,职务,薪水等级,岗位标准工资,安全标准工资,岗位标准津贴,绩效奖金,应出勤天数,实际出勤天数,岗位工资,安全质量奖金,岗位津贴,绩效奖金,证书补贴,通讯补贴,电脑补贴,夜班补贴,加班补贴,误餐补贴,租房补贴,高温补贴,取暖补贴,外出施工补贴,奖金,其他补助,扣款,应发小计,个人社保,个税,实发小计,单位社保,管理费,合计金额,电话,身份证号,银行卡,项目id,项目名称,\n';
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < arr_arr.length; i++) {
            for (let item in arr_arr[i]) {
                str += `${arr_arr[i][item] + '\t'},`;
            }
            str += '\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "工资报表.csv";
        link.click();
    }
}
相关文章
|
16天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
19天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
42 0
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
19天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
2天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
5天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
19天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
19天前
|
JavaScript
js生成二维码点击可放大
js生成二维码点击可放大
|
19天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集