在Vue中實現(xiàn)把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel的方法-創(chuàng)新互聯(lián)

在Vue中實現(xiàn)把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel的方法？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器機柜租賃報價，主機托管價格性價比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

一、使用腳手架創(chuàng)建一個Vue項目，在生成的src目錄下創(chuàng)建exportToExcel.js文件(名稱自取), 并且到App.vue里面快速模擬生成一份表格數(shù)據(jù)

1、我這里簡單模擬網(wǎng)頁上一份表格數(shù)據(jù)，使用的是iview的table組件，網(wǎng)頁上展示的表格的組件你可以用你自己喜歡的組件，我這里做演示用，你完全可以不跟我一樣；

<style lang="less">
</style>
<template>
 <div>
 <h3>這是一個使用iview的table組件，做展示用，你當(dāng)然可以在自己的項目里用自己想要的任何table組件</h3>
 <Table :columns="column" :data="tableData"></Table> //iview的Table組件
 <Button @click="toExcel">導(dǎo)出表格數(shù)據(jù)到Excel</Button> //導(dǎo)出excel的按鈕
 </div>
</template>
<script>
import transform from './exportToExcel.js'  //這個方法來源于二步驟封裝的方法，往下看
export default {
 name:'App',    //這是一個父組件，名稱為App.vue
 data(){
 return {
  tableData:[],  //表格數(shù)據(jù)
  column:[]			 //表格的列
 }		
 },
 methods:{
 toExcel(){
 //調(diào)用我們封裝好的方法，傳3個參數(shù)過去，分別為：數(shù)據(jù)，文件名，回到函數(shù)(可根據(jù)自己需求決定回調(diào)是否需要)
  transform(this.tableData, '我是文件名', this.callback) 
 },
 callback(info){
  console.log(info)
 }
 },
 created(){
 //模擬網(wǎng)絡(luò)請求
 this.tableData = [
  {index:1,name:'我是1號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:2,name:'我是2號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:3,name:'我是3號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:4,name:'我是4號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:5,name:'我是5號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:6,name:'我是6號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:7,name:'我是7號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:8,name:'我是8號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:9,name:'我是9號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:10,name:'我是10號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:11,name:'我是11號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:12,name:'我是12號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:13,name:'我是13號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:14,name:'我是14號',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
  {index:15,name:'我是15號',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}
 ]
 this.column = [
  {key:'index',title:'序號',width:120},
  {key:'name',title:'姓名',width:120},
  {key:'age',title:'年齡',width:120},
  {key:'sex',title:'性別',width:120},
  {key:'hobby',title:'愛好',width:120},
  {key:'hair',title:'發(fā)量',width:120},
  {key:'salaried',title:'薪水',width:120}
  ]
 }
}
</script>

網(wǎng)頁名稱：在Vue中實現(xiàn)把網(wǎng)頁的數(shù)據(jù)導(dǎo)出到Excel的方法-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://www.jbt999.com/article18/geddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、做網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設(shè)計公司、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)