前端js直接导出生成csv文件

本文链接: http://www.zxlucky.com/wordpress/archives/296

作者:陶路

场景:

有些场景下,前端需要筛选数据内容 编辑数据内容 之后生成表格文件 或者不想泄露给服务端数据资料,该方法无需通过服务端 可以直接在浏览器生成csv文件

csv文件格式定义方法:csv文件可以用excel打开 ,每行间隔用 “\n” 隔开,每列间隔用“,”隔开

标签代码:

<a id="out2csv"  href="#" >导出csv</a>

js代码:

out2csv.click(function(){
    str = 'id,name,tel\n1,taolu,02423187000\n2,taodalu,02423186000'
    out2csv.attr('href', 'data:text/txt;charset=utf-8,\ufeff'+str);
    out2csv.attr('download', 'out2csv.csv');
    out2csv.click();
})
可能遇到的问题:

在mac上可能无法打开 可以用商店里的其他软件打开csv文件

另外 导出的csv文件 excel因为没有任何数据描述信息 可能存在将电话号 订单编号等长数字数据强制转换成科学计数法的 数字类型 解决这个问题 参考其他应用里 采用了在数据前 加“`”字符的方法 导出的数据会携带该字符 做excel导入的时候需要特殊处理

继续阅读前端js直接导出生成csv文件

JQ小结20160921

JQ小结

ajaxComplete() 每次完成ajax请求执行该函数 从 jQuery 1.8 开始, .ajaxComplete() 方法只能绑定到 document元素

$(document).ajaxComplete(function() {
 $( “.log” ).text( “Triggered ajaxComplete handler.” );
});

如果global选项设置为false,调用$.ajax() 或 $.ajaxSetup(),.ajaxComplete()方法将不会被触发。

add()结尾添加元素 或者 内容

append()在匹配的元素结尾添加元素 或 内容

after()在元素后面添加同级元素或移动到该位置 若document中有制定的选择器 则为移动 否则在结尾添加内容或标签

before() 在前面添加或移动

$(‘*’) 选择所有元素

$( “:animated” )选择所有正在运行动画的元素 必如关闭动画

bind()为元素绑定一个触发时间 如$(’#selector’).bind(‘click’, function(){…})

blur()当元素失去焦点时触发的时间

:checkbox Selector 匹配所有勾选的复选框元素

:checked Selector  匹配所有勾选的元素

error() bind(‘error’,function(){…})元素加载错误调用函数 如图片加载失败 加载默认图片

change() 表单中的控件 值发生变化的时候触发的时间 如下拉列表的选择 单/复选框值得改变 搜索框的输入操作变化等

delegate()为子元素预加载一个函数或事件 如在一个元素下添加一个子元素前加载函数 事件不会加载 若用delegate方法为其子元素预加载一个方法则会执行 待子元素添加后 事件会绑定在对应子元素上   参考w3cschool实例http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_delegate_newelement

clone() 复制对应元素的属性 和 子标签内容 属性clone(true)连同元素的绑定事件也一并获取

contents()选择所有匹配元素的所有子元素

delay(600) 延迟一段时间执行下一事件 如$(selector).slideToggle(600).delay(1000).slideToggle(600);

slideUp() slideDown() slideToggle() 上下滑动

fadeIn()fadeOut() fadeToggle() 淡入淡出

fadeTo()调整匹配元素的透明度

each() 遍历一个jQuery对象,为每个匹配元素执行一个函数。