在Vue中實現把網頁的數據導出到Excel的方法？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

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

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

<style lang="less">
</style>
<template>
 <div>
 <h3>這是一個使用iview的table組件，做展示用，你當然可以在自己的項目里用自己想要的任何table組件</h3>
 <Table :columns="column" :data="tableData"></Table> //iview的Table組件
 <Button @click="toExcel">導出表格數據到Excel</Button> //導出excel的按鈕
 </div>
</template>
<script>
import transform from './exportToExcel.js'  //這個方法來源于二步驟封裝的方法，往下看
export default {
 name:'App',    //這是一個父組件，名稱為App.vue
 data(){
 return {
  tableData:[],  //表格數據
  column:[]			 //表格的列
 }		
 },
 methods:{
 toExcel(){
 //調用我們封裝好的方法，傳3個參數過去，分別為：數據，文件名，回到函數(可根據自己需求決定回調是否需要)
  transform(this.tableData, '我是文件名', this.callback) 
 },
 callback(info){
  console.log(info)
 }
 },
 created(){
 //模擬網絡請求
 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>

網頁名稱：在Vue中實現把網頁的數據導出到Excel的方法-創(chuàng)新互聯(lián)
網頁鏈接：http://chinadenli.net/article18/geddp.html

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

廣告

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