From 970edeb7597581d26abb58f42e63019fa40889d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Tue, 28 Oct 2025 16:11:23 +0800 Subject: [PATCH] 1 --- _doc/完整使用文档.md | 31 ++++++++++++++++++- demo/src/views/ball/wch_users.vue | 3 +- src/utils/http.js | 4 --- src/utils/uiTool.js | 4 +-- 使用说明.md | 50 +++++++++++++++++++++++++++---- 快速开始.md | 24 +++++++++++++++ 6 files changed, 101 insertions(+), 15 deletions(-) diff --git a/_doc/完整使用文档.md b/_doc/完整使用文档.md index eceb1bd..2f44a7c 100644 --- a/_doc/完整使用文档.md +++ b/_doc/完整使用文档.md @@ -48,6 +48,7 @@ npm run dev ✅ **系统 API**（system 和 system 所有 API） ✅ **全局组件**（Tables、Editor、Upload、FieldRenderer 等） ✅ **布局组件**（Main、ParentView） +✅ **文件下载**（支持 CSV 等格式，自动处理换行符） ✅ **登录和错误页面**（Login、401、404、500） ✅ **用户登录和权限管理** ✅ **动态路由管理** @@ -837,7 +838,35 @@ router.beforeEach((to, from, next) => { }) ``` -### Q6: 如何扩展 Store 模块？ +### Q6: 如何使用文件下载功能？ + +A: 框架提供了便捷的文件下载方法： + +```javascript +// 在 Vue 组件中使用 +export default { + methods: { + exportData() { + // 调用 API 获取数据 + this.$http.fileExport('/api/export', params).then(res => { + // 下载文件（自动处理换行符） + this.$uiTool.downloadFile(res, '数据导出.csv') + this.$Message.success('导出成功！') + }).catch(error => { + this.$Message.error('导出失败：' + error.message) + }) + } + } +} +``` + +**特性：** +- ✅ 自动处理 CSV 换行符 +- ✅ 支持多种文件格式 +- ✅ 浏览器兼容性好 +- ✅ 自动清理临时 URL 对象 + +### Q7: 如何扩展 Store 模块？ A: 在创建 Store 时传入自定义模块： diff --git a/demo/src/views/ball/wch_users.vue b/demo/src/views/ball/wch_users.vue index 43b05f3..8659ff5 100644 --- a/demo/src/views/ball/wch_users.vue +++ b/demo/src/views/ball/wch_users.vue @@ -350,8 +350,7 @@ export default { }, async exportCsv(row) { let res = await wch_usersServer.exportCsv(row) - debugger - window.framework.tools.downloadFile(res, '用户列表.csv'); + } } } diff --git a/src/utils/http.js b/src/utils/http.js index 222ee0c..ea89ad5 100644 --- a/src/utils/http.js +++ b/src/utils/http.js @@ -208,10 +208,6 @@ class Http { } let res = await axios.post(url, formData, config) - filename = filename || res.headers['content-disposition'].split('filename=')[1].split(';')[0] - - - // 直接下载 if (is_down) { window.framework.uiTool.downloadFile(res.data, filename) diff --git a/src/utils/uiTool.js b/src/utils/uiTool.js index 08c4471..4222ad6 100644 --- a/src/utils/uiTool.js +++ b/src/utils/uiTool.js @@ -35,13 +35,13 @@ export default class uiTool { */ static downloadFile(res, fileName) { // 开头和结尾去掉 中间不去掉 - fileName = fileName.replace(/^[_-]+|[_-]+$/g, '') + let tempFileName = fileName || `${new Date().getTime()}.csv` const blob = new Blob([res.data || res]) const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(blob) downloadElement.href = href - downloadElement.download = fileName || new Date().getTime() + '.csv' + downloadElement.download = tempFileName document.body.appendChild(downloadElement) downloadElement.click() document.body.removeChild(downloadElement) diff --git a/使用说明.md b/使用说明.md index 2457253..95148cc 100644 --- a/使用说明.md +++ b/使用说明.md @@ -24,10 +24,10 @@ - **错误页面** (`Page401`, `Page404`, `Page500`) ### 🛠️ 内置工具 -- **HTTP 工具** (`http`) - 封装了 axios，支持拦截器 -- **UI 工具** (`uiTool`) - 删除确认、树形转换、响应式设置 -- **功能工具** (`funTool`) - 文件下载等 -- **通用工具** (`tools`) - 日期格式化、UUID 生成、Cookie 操作 +- **HTTP 工具** (`http`) - 封装了 axios，支持拦截器、文件上传下载 +- **UI 工具** (`uiTool`) - 删除确认、树形转换、响应式设置、文件下载 +- **通用工具** (`tools`) - 日期格式化、UUID 生成、Cookie 操作、深拷贝等 +- **文件下载** - 支持 CSV 等格式的文件下载，自动处理换行符 ## 🚀 快速开始 @@ -259,7 +259,7 @@ export default { methods: { downloadFile() { // 文件下载 - this.$funTool.downloadFile(response, 'filename.csv') + this.$uiTool.downloadFile(response, 'filename.csv') } } } @@ -406,12 +406,50 @@ export default { const res = await this.$http.get('/api/users') this.$uiTool.delConfirm(() => {}) this.$tools.formatDate(new Date()) - this.$funTool.downloadFile(response, 'file.csv') + this.$uiTool.downloadFile(response, 'file.csv') } } } ``` +## 📁 文件下载功能 + +### 使用 downloadFile 方法 + +框架提供了便捷的文件下载功能，支持 CSV 等格式： + +```javascript +// 在 Vue 组件中使用 +export default { + methods: { + // 导出数据 + exportData() { + // 调用 API 获取数据 + this.$http.fileExport('/api/export', params).then(res => { + // 使用 downloadFile 下载 + this.$uiTool.downloadFile(res, '数据导出.csv') + this.$Message.success('导出成功！') + }).catch(error => { + this.$Message.error('导出失败：' + error.message) + }) + } + } +} +``` + +### 支持的数据格式 + +- **CSV 格式**：自动处理换行符，保持表格格式 +- **Blob 对象**：支持二进制文件下载 +- **文本数据**：支持纯文本文件下载 + +### 自动处理特性 + +- ✅ **换行符保持**：CSV 文件的换行符会被正确保持 +- ✅ **文件名处理**：自动清理文件名中的特殊字符 +- ✅ **浏览器兼容**：支持所有现代浏览器 +- ✅ **内存管理**：自动清理临时 URL 对象 + ## 📝 业务开发示例 ### 创建业务页面 diff --git a/快速开始.md b/快速开始.md index 1964d1c..f642ffa 100644 --- a/快速开始.md +++ b/快速开始.md @@ -31,6 +31,30 @@ app.$mount('#app') **完整代码只需 12 行：** +## 📁 文件下载功能 + +框架内置了便捷的文件下载功能： + +```javascript +// 在组件中使用 +export default { + methods: { + exportData() { + // 调用 API 获取数据 + this.$http.fileExport('/api/export', params).then(res => { + // 下载文件（自动处理换行符） + this.$uiTool.downloadFile(res, '数据导出.csv') + }) + } + } +} +``` + +**特性：** +- ✅ 自动处理 CSV 换行符 +- ✅ 支持多种文件格式 +- ✅ 浏览器兼容性好 + ```javascript // main.js import AdminFramework from './admin-framework.js'