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. ]