Vue中导入导出Excel

由于项目需要导出Excel，所以测试了两种的方法

第一种：使用vue-json-excel

• 这个库导出数据的时候只能导出为xls和csv格式，并且由于是通过html强制转换成xls的所以生成的文件打开时会报错，导出后用office打开会提示“文件格式和扩展名不匹配”
  所以不建议使用这种方式，直接跳过

第二种：使用js-xlsx

js-xlsx由SheetJS出品的一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

• 安装xlsx

npm install -S xlsx

• 引入xlsx

import * as xlsx from 'xlsx'

• 导入Excel转换为json数据
  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">点击上传</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="序号">
      </el-table-column>
      <el-table-column
          prop="wlmc"
          label="物料名">
      </el-table-column>
      <el-table-column
          prop="jg"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="sl"
          label="数量">
      </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
}

• 导出json数据生成Excel文件
  源码：

 
<template>
  <div>
    <el-button type="success" @click='json2Excel'>导出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="价格">
      </el-table-column>
      <el-table-column
          prop="sl"
          label="数量">
      </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(){
      // 创建工作表
      let data = xlsx.utils.json_to_sheet(this.tableData);
      // 创建工作簿
      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>

若是需要导出后端中的数据可以利用AJAX,fech,Axios等方法获取后端数据，但要注意异步和跨域等问题