纯前端 excel 导出

前端 excel 表格导出

我们习惯了后端去处理表格，直接接口返回 ，那前端如何轻松的导出表格呢？

文章目录

Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐

/使用兼容性支持 vue、react 、angular
几乎兼容所有浏览器 （IE 8版本以上）使用非常灵活

安装

npm install --save xlsx

① vue2 中使用

vue2 导出表格 一 ：导出的 js 配置文件 👇 （excelConfig.js）

constXLSX=require("xlsx");//使用import有的属性无法找到exportfunctionexportExcel(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');}

二：使用 👇 ( page.vue )

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

三：效果如下 👇

② vue3 中使用

vue3 导出表格 一 ：导出的 js 配置文件 👇 （excelConfig.js） 相比 vue2 导入的方式不同

import*asXLSXfrom'xlsx'exportfunctionexportExcel(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');}

二：使用 👇 ( page.vue )

<template><button@click="download">下载表格</button></template><scriptsetup>import{ exportExcel }from"./excelConfig"const exc_data =[['第一列','第二列','第三列'],['aa','bb','cc'],['dd','ee','ff']];functiondownload(){exportExcel('vue3导出的表格',this.exc_data)}</script>

三：效果同上 👆

③ react 中使用

react 导出表格 一 ：导出的 js 配置文件 👆 （excelConfig.js） >与 vue2 的写法完全相同

二：使用 👇 ( page.jsx )

import React from"react";import{exportExcel }from'./excelConfig'const exc_data =[['第一列','第二列','第三列'],['aa','bb','cc'],['dd','ee','ff']];functionIndex(){return(<div className="box"><button onClick={()=>{exportExcel('react导出表格',exc_data)}}>下载</button></div>);}exportdefault Index;

三：效果同上 👆

Ⅲ. 通过 vue-json-excel ⭐⭐

/使用兼容性只支持vue使用使用简单，但不灵活

安装

npm install vue-json-excel

使用

一：主文件 => 注册该全局组件 👇 (main.js)

import JsonExcel from'vue-json-excel'
Vue.component('downloadExc', JsonExcel)

二：使用该组件 👇 （page.vue）

<template><download-excelclass="export-excel-wrapper":data="excelpage":fields="fields"name="filename"type="xlsx"><button> 导出excal </button></download-excel></template><script>exportdefault{data(){return{
      fields:{
        姓名:"name",//对应字段
        年龄:'age'},
      excelpage:[{ name:'张三', age:18},{name:'李四', age:20}],};}}</script>

三：效果如下 👇

Ⅱ. 通过blob文件流导出 ⭐⭐⭐

用于后端返回blob数据

如果后端返回给前端的 blob 数据，前端转换表格导出 👇

xxxApi(params).then(res=>{if(res){const blob =newBlob([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('导出失败')}})

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁