纯前端导出表格

前端 excel 表格导出

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

文章目录

• • • 前端 excel 表格导出
    • Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐
    • • • 安装
        • ① vue2 中使用
        • ② vue3 中使用
        • ③ react 中使用
        • Ⅲ. 通过 vue-json-excel ⭐⭐
        • • • 安装
            • 使用
            • Ⅱ. 通过blob文件流导出 ⭐⭐⭐
            • • • 用于后端返回blob数据

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

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

                  安装

                  npm install --save xlsx
                  

                  ① vue2 中使用

                  vue2 导出表格

                  一 ：导出的 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');
                  }
                  

                  二：使用 👇 ( page.vue )

                  三：效果如下 👇

                  

                  ---

                  ② vue3 中使用

                  vue3 导出表格

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

                  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');
                  }
                  

                  二：使用 👇 ( page.vue )

                  三：效果同上 👆

                  ---

                  ③ 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']
                  ];
                  function Index() {
                    return (
                      
                  
                         ()=>{ exportExcel('react导出表格',exc_data) }}>下载
                      
                    );
                  }
                  export default Index;
                  

                  三：效果同上 👆

                  ---

                  Ⅲ. 通过 vue-json-excel ⭐⭐

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

                  安装

                  npm install vue-json-excel
                  

                  使用

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

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

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

                  三：效果如下 👇

                  

                  ---

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

                  用于后端返回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('导出失败')
                  	}
                  })
                  

                  

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