導出Excel組件

任務場景：上傳圖片生成表格（百度api）展示表格內容并可以導出成Excel(前端實現)

前端導出表格為Excel文件，就封裝了一個按鈕可以直接點擊然后導出表格(記錄一下)

效果展示

具體實現 (組件篇)

// 首先要引入兩個js文件 別人封好的 Blob.js和Export2Excel.js這兩個網上很多可以直接去下載 // 或者npm下載也可以 <template> <div v-if="flag"><slot></slot> </div> </template><script> export default {/*columns: [{title: '', key: 'date'},{title: '', key: 'name'},{title: '', key: 'address'}],tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1516 弄'}]父組件點擊事件click () {this.exportTableFlag = false// 這里面寫數據的處理this.$nextTick(() => {this.exportTableFlag = truethis.$refs.exportTableRef.exportData()})}*/props: {columns: {require: true,Object: Array},tableData: {require: true,Object: Array},tableName: {require: false,default: '數據列表',Object: String},btnName: {require: false,default: '導出表格',Object: String},flag: {require: true,default: false,Object: Boolean}},data() {return {e_columns: [],e_tableData: []}},watch: {columns: {handler (newV) {this.e_columns = newV},deep: true,immediate: true},tableData: {handler (newV) {this.e_tableData = newV},deep: true,immediate: true}},mounted () {// this.$nextTick(() => {// this.$on('exportData', function () {// console.log(this.e_tableData)// })// })},methods: {// 由父組件通過ref直接調用exportData () {this.$emit('exportData')console.log(this.e_tableData)console.log(this.e_columns)this.export2Excel(this.e_columns, this.e_tableData)},export2Excel(columns,list){require.ensure([], () => {const { export_json_to_excel } = require('./excel/Export2Excel');let tHeader = []let filterVal = []console.log(columns)if(!columns){return;}columns.forEach(item =>{tHeader.push(item.title)filterVal.push(item.key)})const data = list.map(v => filterVal.map(j => v[j]))export_json_to_excel(tHeader, data, this.tableName);})}} } </script><style></style>

具體地方使用

<export-table ref="exportTableRef" :columns="columns" :tableData="tableData" :flag="exportTableFlag"><el-button type="primary" @click="createdExcel" style="margin-top: 20px" size="small">生成Excel表格</el-button> </export-table> // 不知道為啥直接父組件直接調用時，子組件的watch監聽不到，所以使用了v-if來讓子組件能夠監聽到數據變化 import exportTable from '@/components/Common/exportTable/exportTable' components: {exportTable }， data () {return {exportTableFlag: false} }, methods: {// 把數據處理成子組件需要的數據 我這兒由于下方加了一個操作按鈕，所以需要把操作按鈕干掉，所以寫了這些邏輯// 點擊之前先隱藏按鈕 然后調用方法前再顯示 頁面上沒有任何消失顯示的效果 createdExcel () {console.log(this.imgTableList)this.exportTableFlag = falsethis.columns = []this.tableData = []let tableObj = {}this.imgTableList.map((item, index) => {if (index === 0) {item.map((item1, index1) => {this.columns.push({title: item1.word,key: item1.column})})} else if (index !== this.imgTableList.length - 1) {item.map((item2, index2) => {tableObj[item2.column] = item2.word})this.tableData.push(tableObj)tableObj = {}}})console.log(this.columns)console.log(this.tableData)this.$nextTick(() => {this.exportTableFlag = true// 調用子組件導出表格方法this.$refs.exportTableRef.exportData()})}, }

總結

以上是生活随笔為你收集整理的vue导出Excel组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。