Vue3-Tools Docs

外观

纯前端 JavaScript 实现 Excel 导出：支持多样式、合并与样式控制 ​

autofit

🎉 exportDiyJS

路虽远行则将至，事虽难做则必成！

🚩 背景 ​

在 Web 应用中，用户经常需要将数据导出为 Excel 文件以便于离线查看和进一步分析。本文介绍了如何仅使用前端 JavaScript 技术来实现 Excel 文件的导出功能，同时支持丰富的样式定制，包括合并列、合并行、行样式和单元格样式的控制。 功能特性

🌈 Awesome README Awesome ​

该项目中所有的代码均经过精心的注释，以便于理解和学习。 该项目中所有的 NPM 包均已上传至 npm 仓库，Api 均在docs 及 Github-Source 可查阅

🏭 技术栈说明 ​

JavaScript：一种脚本语言，用于在浏览器和 Node.js 中实现网页和服务器端的 JavaScript 代码。 Css：一种样式表语言，用于描述 HTML 的样式。

npm packagebuild statuslanguagenpm packagenpm packageLICENSE

JS Plus ​

简体中文

High performance & Simplicity Vue3 Hooks library

✨ Features ​

  • [x] Excel 包含以下功能：
  • [x] 🏄🏼‍♂️ - .多种样式支持：可以为 Excel 文件中的单元格指定字体、颜色、背景色、边框等样式。
  • [x] 🎯- 合并列和行：支持合并多个单元格，无论是横向合并（列合并）还是纵向合并（行合并）。
  • [x] 🔖 - 行样式控制：可以对整行的样式进行统一设置，如行高、背景色等。
  • [x] 🎉 - 单元格样式控制：允许对单个单元格进行精细化的样式控制，包括但不限于字体大小、字体颜色、对齐方式等。
  • /**
  • * @description 表格 Excel 结构说名
  • * @method  tableData
  • * @param { string }  - text Excel 单元格内容
  • * @param { string }  - className 单元格样式类名
  • * @param { number }  - colspan 单元格合并列数
  • * @param { number }  - rowspan 单元格合并行数
  • * @param { object }  - cells 单元格数组，当需要设置整行颜色时用到
  • * @param { string }  - captionText 表格标题
  • * @description 表格数据和合并规则 colspan 和 rowspan 合并规则 设置后就需要删除对应规则的单元格
  • * @returns  - void
  • * @example
  • * >
  • * @author zk
  • * @createDate 2024/01/10 09:32:04
  • * @lastFixDate 2024/01/10 09:32:04
  • **/

    Alt text

📦 项目预览 ​

Click Preview

💒 代码仓库 ​

base
# 国内
https://gitee.com/zhang-kun8888/export_-excel_-js

# 国外
https://github.com/huozaifenlangli/Vue3-template.git
# 国内
https://gitee.com/zhang-kun8888/export_-excel_-js

# 国外
https://github.com/huozaifenlangli/Vue3-template.git

​

🪴 Project Activity ​

Alt

⚡ 使用说明 ​

base
# 克隆项目
git clone https://gitee.com/zhang-kun8888/export_-excel_-js

# 进入项目
cd Vite--Ts--Vue3---template

# 安装依赖
pnpm install
pnpm install -g concurrently // 同时运行多个依赖

# 运行项目
pnpm run dev

# 打包发布
pnpm run build
# 克隆项目
git clone https://gitee.com/zhang-kun8888/export_-excel_-js

# 进入项目
cd Vite--Ts--Vue3---template

# 安装依赖
pnpm install
pnpm install -g concurrently // 同时运行多个依赖

# 运行项目
pnpm run dev

# 打包发布
pnpm run build

🏭 环境支持 ​

bash
| Edge                                                                     | last 2 versions                                                                   | last 2 versions                                                                | last 2 versions                                                                |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
| ![Edge](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) |
| Edge                                                                     | last 2 versions                                                                   | last 2 versions                                                                | last 2 versions                                                                |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
| ![Edge](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) |

由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。

💕 特别感谢 ​

特别感谢老哥们的建议、指导与帮忙。谢谢！🌸

———— @张坤 CSDN 彩色之外-————

2023、11、28🌸

📄 License ​

MIT

By CSDN @彩色之外