纯前端vue框架实现excel 导出

Posted 2022-12-21 coderkey

一，下载插件js-xlsx

npm install --save xlsx

---

二，新建一个js文件用来配置（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');

---

三，在需要使用的页面中引入js配置文件

<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>

---