前端导出excel无法打开（纯前端导出表格）

时间2025-05-01 13:42:58分类IT科技浏览4249

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

前端 excel 表格导出

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

Ⅰ. 通过 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 )

<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>

三：效果如下 👇

② 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 )

<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>

三：效果同上 👆

③ 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 ( <div className="box"> <button onClick={()=>{ exportExcel(react导出表格,exc_data) }}>下载</button> </div> ); } 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）

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

三：效果如下 👇

Ⅱ. 通过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们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。