Vue之table2excel应用--前端表格导出
前端将后台传过来的数据,自定义去导出,不仅减少了再次去loading后台接口的时间,而且提高的用户体验度。但弊端是只能是当前表格所获取到的所有信息。后来发现可以自定义编辑【红色框起来的就是我自己写的,但水平与垂直居中还是没有生效…②.可以发现,excel的默认设定属性,将preserveColors(保存颜色) 改为true。2.添加到Vue项目中【public->新建文件夹table2excel
·
前端将后台传过来的数据,自定义去导出,不仅减少了再次去loading后台接口的时间,而且提高的用户体验度。但弊端是只能是当前表格所获取到的所有信息。所以用于不用 取决于自己侧重哪一方面。
table2excel的使用方法
1.下载jquery.table2excel.js
和jquery.table2excel.min.js
2.添加到Vue项目中【public->新建文件夹table2excel->添加到此处】
3.在index.html
中引用:
4.重启项目
5.在导出方法中 添加内容
//exceltable 是表格的id
exportClick(){
$("#exceltable").table2excel({
//文件名称
filename: `${this.$route.query.reportName}${formatDate(new Date())}.xls`,
preserveColors: true
});
}
6.导出后发现表格样式没有生效
解决方案如下:
①.打开jquery.table2excel.js
②.可以发现,excel的默认设定属性,将preserveColors(保存颜色) 改为true
defaults = {
exclude: ".noExl",//过滤掉不需要导出的行信息
name: "Table2Excel",
filename: "table2excel",//文件名称
fileext: ".xls",//导出excel类型
exclude_img: true,//是否包含图片
exclude_links: true,//是否包含连接
exclude_inputs: true,//是否包含输入框
preserveColors: false//是否显示颜色属性的设定
};
③.改后发现只有字体颜色 和背景颜色有了改变 但我的边框 居中 等等 设定的样式都没显示。后来发现可以自定义编辑【红色框起来的就是我自己写的,但水平与垂直居中还是没有生效…有可能是因为没有自定义宽高的原因】
注意:我截图的这部分是对td属性的设定,还有关于对tr属性的设定,看源码即可分辨出来
更多推荐
已为社区贡献10条内容
所有评论(0)