Vue之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属性的设定，看源码即可分辨出来