前端导出excel文档

发布于 2023-12-20  134 次阅读


npm install --save xlsx

v2

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');
}
<template>
    <button @click="download">下载表格</button>
</template>
<script>
import { exportExcel } from "./excelConfig";
export default {
  data() {
    return {
        exc_data:[ 
            ['第一列', '第二列' ,'第三列'],
            ['aa', 'bb' ,'cc'],
            ['dd', 'ee' ,'ff'],
         ]
    };
  },
  methods: {
    download() {
      exportExcel('vue2导出的表格',this.exc_data);
    },
  },
};
</script>

v3

import * as XLSX from 'xlsx' 
export function exportExcel(filename,data) {
    let exc = XLSX.utils.book_new();
    let exc_data = XLSX.utils.aoa_to_sheet(data); 
    XLSX.utils.book_append_sheet(exc, exc_data, filename);
    XLSX.writeFile(exc, filename + 'xlsx');
}
<template>
   <button @click="download">下载表格</button>
</template>
<script  setup>
import { exportExcel } from "./excelConfig"
const exc_data = [
                    ['第一列', '第二列' ,'第三列'],
                    ['aa', 'bb' ,'cc'],
                    ['dd', 'ee' ,'ff']
                ];
function download() {  exportExcel('vue3导出的表格',this.exc_data)  }
</script>

效果如下


http://img-blog.csdnimg.cn/5feed55c823e4030b862c63d7d3ea45b.png

通过blob文件流导出(如果后端返回给前端的是blob数据,前端转换成表格导出)

xxxApi(params).then(res=>{
    if(res){
          const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          const a = document.createElement('a')
          a.download = '表格.xlsx'
          a.href = window.URL.createObjectURL(blob)
          a.click()
          console.log('导出成功')
    }else{
        console.log('导出失败')
    }
})

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。