1
This commit is contained in:
@@ -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 时传入自定义模块:
|
||||
|
||||
|
||||
@@ -350,8 +350,7 @@ export default {
|
||||
},
|
||||
async exportCsv(row) {
|
||||
let res = await wch_usersServer.exportCsv(row)
|
||||
debugger
|
||||
window.framework.tools.downloadFile(res, '用户列表.csv');
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
50
使用说明.md
50
使用说明.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 对象
|
||||
|
||||
## 📝 业务开发示例
|
||||
|
||||
### 创建业务页面
|
||||
|
||||
24
快速开始.md
24
快速开始.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'
|
||||
|
||||
Reference in New Issue
Block a user