VUE中使用vue-json-excel超级方便导出excel表格数据

1、首先引入依赖

npm install vue-json-excel

2、在main.js中引用此方法

1. //引入导出excel组件方法

2. import JsonExcel from 'vue-json-excel'

3. Vue.component('downloadExcel', JsonExcel)

3、在需要使用此功能的页面中直接调用

1. //json_data为数据源List，json_fields为表头信息和取值逻辑

2. <download-excel

                   class = "export-excel-wrapper"

                   :data = "tableData"

                   name = "出入库明细.xls">

                   <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->

                    <el-button type="primary"><i class="el-icon-upload el-icon--right"></i></el-button>

               </download-excel>

3. <button :data="json_data" :fields="json_fields" name="UserInfo">点击导出</button>

4. //表头为User_Name、City、phone、remark

5. //取值逻辑为：User_Name取字段name

6. //City取info中的city

7. //phone取phone中的landline（拼接后）

8. //remark取info中的remark（拼接后）

9. json_fields: {

10. "User_Name": "name", //常规字段

11. "City": "info.city", //支持嵌套属性

12. "phone": {

13. field: "phone.landline",

14. callback: value => {//自定义回调函数

15. return `Landline Phone - ${value}`;//拼接返回值

16. }

17. },

18. "remark": {

19. field: "info.remark",

20. callback: value => {

21. return `Reamrk: ${value}`;

22. }

23. }

24. },

25. //测试数据

26. json_data: [

27. {

28. name: "张三",

29. info:{

30. city: "New York",

31. country: "EN",

32. remark:"测试1"

33. },

34. phone: {

35. mobile: "1",

36. landline: "11"

37. }

38. },

39. {

40. name: "李四",

41. info:{

42. city: "BeiJing",

43. country: "CN",

44. remark:"测试2"

45. },

46. phone: {

47. mobile: "2",

48. landline: "22"

49. }

50. },

51. {

52. name: "王二",

53. info:{

54. city: "Nanjing",

55. country: "CN",

56. remark:"测试3"

57. },

58. phone: {

59. mobile: "3",

60. landline: "33"

61. }

62. }

63. ],

64. //数据格式

65. json_meta: [

66. [{

67. " key ": " charset ",

68. " value ": " utf- 8 "

69. }]

70. ]