vue中使用xlsx導出excel文件

俗話說，前人栽樹，后人乘涼，感謝強人封裝好的xlsx，直接使用就可以了。這是網上找到的，也不知道原作者是不是這位博主，先貼出來吧：

https://www.cnblogs.com/boylxx/p/13646793.html

封裝的xlsx為：

import fs from 'file-saver'
import XLSX from 'xlsx'


export function xlsx(json, fields, filename = '表格') {//導出xlsx
	json.forEach(item => {
		for (let i in item) {
			if (fields.hasOwnProperty.call(i)) {
				item[fields[i]] = item[i];
			}
			delete item[i]; //刪除原先的對象屬性
		}
	})
	let sheetName = filename //excel的文件名稱
	let wb = XLSX.utils.book_new()  //工作簿對象包含一SheetNames數組，以及一個表對象映射表名稱到表對象。XLSX.utils.book_new實用函數創建一個新的工作簿對象。
	let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //將JS對象數組轉換為工作表。
	wb.SheetNames.push(sheetName)
	wb.Sheets[sheetName] = ws
	const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//設置表格的樣式
	let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //寫入的樣式
	let wbout = XLSX.write(wb, wopts)
	let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
	fs.saveAs(blob, filename + '.xlsx')
}

const s2ab = s => {
	var buf;
	if (typeof ArrayBuffer !== 'undefined') {
		buf = new ArrayBuffer(s.length)
		var view = new Uint8Array(buf)
		for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
		return buf
	} else {
		buf = new Array(s.length);
		for (var j = 0; j != s.length; ++j) buf[j] = s.charCodeAt(j) & 0xFF;
		return buf;
	}
}

我使用的是vue+element實現頁面效果：

<template>
  <div id="app">
    <div><el-button type="success" @click="outExcel">導出excel</el-button></div>
    <el-table
    :data="jsonData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="學號"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年齡">
    </el-table-column>
      <el-table-column
      prop="classes"
      label="學院">
    </el-table-column>
  </el-table>
  </div>
</template>
 
<script>
import {xlsx} from './utils/xlsx'
 
export default {
  data() {
    return {
      jsonData:[{
        id:'1',
        name:'小智',
        age:18,
        classes:'商學院'
        
      },
      {
        id:'2',
        name:'小白',
        age:19,
        classes:'商學院'
        
      },
      {
        id:'3',
        name:'小藍',
        age:12,
        classes:'商學院'
        
      },
      {
        id:'4',
        name:'小花',
        age:14,
        classes:'商學院'
        
      },
      {
        id:'5',
        name:'小粉',
        age:15,
        classes:'商學院'
        
      },
      {
        id:'6',
        name:'小黃',
        age:16,
        classes:'商學院'
        
      },
      {
        id:'7',
        name:'小紅',
        age:17,
        classes:'商學院'
        
      },
      {
        id:'8',
        name:'小黑',
        age:19,
        classes:'商學院'
        
      },
      ],
      listHander:{
        id:'學號',
        name:'姓名',
        age:'年齡',
        classes:'學院'
      }
    }
  },
  methods: {
    outExcel(){
      xlsx(this.jsonData,this.listHander,'學生')
    }
  },
}
</script>
 
<style>
 
</style>

效果圖為：

導出效果：

 

沒有什么值得注意的，只要表頭和列內容對應就行了