由于項(xiàng)目需要導(dǎo)出Excel，所以測(cè)試了兩種的方法

第一種：使用vue-json-excel

• 這個(gè)庫導(dǎo)出數(shù)據(jù)的時(shí)候只能導(dǎo)出為xls和csv格式曾棕，并且由于是通過html強(qiáng)制轉(zhuǎn)換成xls的所以生成的文件打開時(shí)會(huì)報(bào)錯(cuò)刊懈，導(dǎo)出后用office打開會(huì)提示“文件格式和擴(kuò)展名不匹配”
  所以不建議使用這種方式赌厅，直接跳過

第二種：使用js-xlsx

js-xlsx由SheetJS出品的一款非常方便的只需要純JS即可讀取和導(dǎo)出excel的工具庫恢氯，功能強(qiáng)大靖苇，支持格式眾多杉辙，支持xls模捂、xlsx、ods(一種OpenOffice專有表格文件格式)等十幾種格式蜘矢。

• 安裝xlsx

npm install -S xlsx

• 引入xlsx

import * as xlsx from 'xlsx'

• 導(dǎo)入Excel轉(zhuǎn)換為json數(shù)據(jù)
  ExcelToJson.vue源碼

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/"
      :before-upload="beforeUpload"
      multiple
      :limit="3"
      :file-list="fileList">
      <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
      <div slot="tip" class="el-upload__tip">只能上傳大小不超過500kb</div>
    </el-upload>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="__rowNum__"
          label="序號(hào)">
      </el-table-column>
      <el-table-column
          prop="wlmc"
          label="物料名">
      </el-table-column>
      <el-table-column
          prop="jg"
          label="價(jià)格">
      </el-table-column>
      <el-table-column
          prop="sl"
          label="數(shù)量">
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import { doReadExcelFile } from '@/utils/file.js'

export default {
  components: {},
  data() {
    return {
      tableData: [],
      fileList:[]
    };
  },
  props: {},
  created() {},
  mounted() {},
  computed: {},
  methods: {
    async beforeUpload(file){
      let data = await doReadExcelFile(file)
      this.tableData = data
      return false //false不上傳文件
    }
  },
  watch: {}
};
</script>
 
<style lang="scss" scoped>
</style>

utils/readfile.js源碼

import * as xlsx from 'xlsx'

export const readFile = (file)=>{
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = ev => {
      resolve(ev.target.result)
    }
  })
}
export const doReadExcelFile= async (file)=>{
  let dataBinary = await readFile(file)
  let workBook = xlsx.read(dataBinary, {type: 'binary', cellDates: true})
  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
  const data = xlsx.utils.sheet_to_json(workSheet)
  console.log(data)
  return data
}

• 導(dǎo)出json數(shù)據(jù)生成Excel文件
  源碼：

 
<template>
  <div>
    <el-button type="success" @click='json2Excel'>導(dǎo)出Excel</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="wlmc"
          label="物料名">
      </el-table-column>
      <el-table-column
          prop="jg"
          label="價(jià)格">
      </el-table-column>
      <el-table-column
          prop="sl"
          label="數(shù)量">
      </el-table-column>
    </el-table>

  </div>
</template>
 
<script>
import * as xlsx from 'xlsx'
export default {
  components: {},
  data() {
    return {
      tableData: [{
        wlmc: '氯化鈉',jg: '10',sl: '100'}, 
        {wlmc: '鹽酸',jg: '20',sl: '50'}, 
        {wlmc: '硫酸',jg: '30',sl: '100'}, 
        {wlmc: '蔗糖',jg: '15',sl: '20'}]
    };
  },
  props: {},
  created() {},
  mounted() {},
  computed: {},
  methods: {
    json2Excel(){
      // 創(chuàng)建工作表
      let data = xlsx.utils.json_to_sheet(this.tableData);
      // 創(chuàng)建工作簿
      let wb = xlsx.utils.book_new();
      // 將工作表放入工作簿中
      xlsx.utils.book_append_sheet(wb, data, 'Sheet1');
      // 生成文件并下載
      xlsx.writeFile(wb, 'test.xlsx');
    }
  },
  watch: {}
};
</script>
 
<style lang="scss" scoped>
</style>

若是需要導(dǎo)出后端中的數(shù)據(jù)可以利用AJAX,fech,Axios等方法獲取后端數(shù)據(jù)狂男，但要注意異步和跨域等問題