0


纯前端 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们不要吝啬你们的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁

标签: 前端 javascript

本文转载自: https://blog.csdn.net/weixin_42232622/article/details/127834241
版权归原作者 前端不秃头 所有, 如有侵权,请联系我们删除。

“纯前端 excel 导出”的评论:

还没有评论