Vue EjsExcel是一個基于Vue.js的Excel文件導入導出組件庫。它使用ejs模板引擎來生成Excel文件,而Vue.js則處理數據渲染和邏輯控制。
在使用Vue EjsExcel之前,首先需要在項目中安裝ejsexcel和file-saver兩個庫:
npm install ejsexcel file-saver --save
接下來,注冊Vue EjsExcel組件并使用它來生成Excel文件:
<template> <div> <v-ejsexcel :title="title" :data="data" :columns="columns" :filename="filename"></v-ejsexcel> </div> </template> <script> import VueEjsexcel from 'vue-ejsexcel'; export default { components: { VueEjsexcel, }, data() { return { title: '用戶列表', columns: [ {label: 'ID', value: 'id'}, {label: '用戶名', value: 'username'}, {label: '郵箱', value: 'email'}, ], data: [ {id: 1, username: '張三', email: 'zhangsan@163.com'}, {id: 2, username: '李四', email: 'lisi@163.com'}, ], filename: 'userlist.xlsx', }; }, }; </script>
上面的代碼中,我們將Vue EjsExcel組件注冊為Vue組件,并傳遞了需要生成Excel文件的標題、列和數據。filename屬性指定文件名。
最后,我們需要在瀏覽器中引入FileSaver.js來實現文件下載功能:
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.1/dist/FileSaver.min.js"></script>
現在就可以在Vue應用中使用Vue EjsExcel來方便地導入導出Excel文件了。
上一篇python 結果為整形
下一篇c 在線格式化json