vue纯前端导出excel

最新推荐文章于 2024-11-04 16:33:32 发布

原创最新推荐文章于 2024-11-04 16:33:32 发布 · 678 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js

vue 同时被 3 个专栏收录

4 篇文章

订阅专栏

element-ui

4 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现纯前端的Excel导出功能。首先展示了导出效果，接着详细说明了安装相关依赖、封装公共导出函数以及在Vue组件中调用该函数的步骤。

在vue+element-ui项目中，实现纯前端导出excel功能

效果展示

页面展示
页面点击导出按钮，实现vue纯前端导出excel
导出excel展示

1.安装依赖

npm install file-saver
npm install xlsx

2.封装成公共函数

可以根据自己的需要，选择是否封装成公共函数。
我是放在utils下的config.js文件里面。


//导出
// 引入刚才安装的依赖
import FileSaver from 'file-saver'
import XLSX from 'xlsx';
// 定义暴露出去的函数名称 exportExcel
// id 是 table外层，你自己写的那个div的id名称。！！！！！！！！！
// name 是生成文件的名称，name 可以不传。
export function exportExcel(id, name) {
  let exportName = name || id;
  var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
  /* get binary string as output */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs(new Blob([wbout], {
      type: 'application/octet-stream'
    }), exportName + '.xlsx')
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  }
  return wbout
}

3.在.vue文件中引入并使用"exportExcel"函数

在需要导出excel的table外面包了一个div，id叫“export”
在这里插入图片描述

// 引入函数
import { exportExcel } from "@/utils/config";

// 使用-点击事件触发"exportExcel"，传入参数为 id 和 name 
exportExcelBtn() {
  exportExcel("export", "闲置情况");
},