如何ping云服务器

excel 的导入导出功能是前端开发中非常常见的功能，特别是在做后台管理相关的功能，导入导出excel 基本是家常便饭，有很多前端开发的同学还没做过这类需求，接到这类需求时会有些心慌，别怕，本文将介绍一款前端中最强大的导入导出插件SheetJS (xlsx)，SheetJS 功能丰富且适用于各种场景

Vue3项目创建

在实现导入导出之前先创建一个vue3项目：

首先创建一个vue项目

pnpm create vite vue3-excel --template vue

云服务器 mac系统

安装element-plus 用来展示数据

pnpm i element-plus

安装 自动导入的vite插件

pnpm i -D unplugin-vue-components unplugin-auto-import

配置自动导入 vite.config.jsimport{ defineConfig }from"vite";importvuefrom"@vitejs/plugin-vue";importAutoImportfrom"unplugin-auto-import/vite";importComponentsfrom"unplugin-vue-components/vite";import{ ElementPlusResolver }from"unplugin-vue-components/resolvers";//https://vite.dev/config/exportdefaultdefineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], });

使用 SheetJS (xlsx)

SheetJS 是目前最强大的 JavaScript Excel 处理库，支持各种 Excel 格式和复杂操作。SheetJS 还支持跨平台，比如可以在 Web 浏览器、服务器、桌面应用程序、移动应用程序、Salesforce 和 Photoshop 插件，甚至在 Excel 中使用。

使用方式如下：

<template><divclass="top-tool"><el-button@click="exportExcelOrCsv(excel)">导出Excel