Pure front-end vue framework realizes excel export

1. Download the plugin js-xlsx

npm install --save xlsx

---

Second, create a new js file for configuration (excelConfig.js)

const XLSX = require("xlsx");  //使用import有的属性无法找到
export function exportExcel(filename,data) {
    let exc = XLSX.utils.book_new(); // 初始化一个excel文件
    let exc_data = XLSX.utils.aoa_to_sheet(data);   // 传入数据 , 到excel
    // 将文档插入文件并定义名称
    XLSX.utils.book_append_sheet(exc, exc_data, filename);
    // 执行下载
    XLSX.writeFile(exc, filename + '.xlsx');
}

---

Third, introduce the js configuration file in the page that needs to be used

<template>
  <div id="app">
    <div>
      <button @click="download">下载表格</button>
    </div>
    <router-view/>
  </div>
</template>
<script>
import { exportExcel } from "./directive/excelConfig";
export default {
  data() {
    return {
      exc_data:[ 
		    ['姓名', '年龄' ,'性别'],
			['coderkey', '24' ,'男'],
			['pink', '18' ,'男'],
            ['coderkey', '19' ,'男'],
		 ],
    }
  },
  methods: {
    download() {
      exportExcel('vue2导出的表格',this.exc_data);
    },
  },
}
</script>

---