跟AI学一手之前端导出

现在前端因为有 blob 的 api,导文件太方便了,不用后端配合,直接从前端导出文件,而且只要你知道文件格式,理论上可以导出任何格式。下面是一个导出 csv 的函数,比较简单

javascript 复制代码
const exportLogs = () => {
              if (logs.value.length === 0) {
                alert("暂无数据可导出");
                return;
              }
              
              const headers = ["日志类型", "操作用户", "IP地址", "位置", "浏览器", "操作时间", "备注"];

              
              const rows = logs.value.map((log) => {

                return [
                  log.log_type || "",
                  log.username || "",
                  log.ip_addr || "",
                  log.location || "",
                  log.browser || "",
                  log.tm || "",
                  log.comment || "",
                ];

              });
              
              const csv = [
                headers.join(","),
                ...rows.map(row => row.map(cell => `"${cell || ''}"`).join(","))
              ].join("\n");
              
              const blob = new Blob(["\ufeff" + csv], {
                type: "text/csv;charset=utf-8;",
              });
              const link = document.createElement("a");
              link.href = URL.createObjectURL(blob);
              link.download = `审计日志_${formatDate(new Date(), "YYYY-MM-DD")}.csv`;
              link.click();
            };
            
相关推荐
怕浪猫1 小时前
Electron 开发实战(十三):性能优化策略|极速启动、低内存、流畅渲染、极致瘦身
前端·javascript·electron
Csvn1 小时前
React useEffect 异步竞态:90% 的人都踩过的坑
前端·react.js
如果超人不会飞1 小时前
用TinyRobot Bubble组件打造灵活强大的AI对话气泡
前端·vue.js
橘子星1 小时前
打破串行枷锁:深入理解 JS 同步、异步与 Promise 实战
前端·javascript
用户059540174461 小时前
LangChain 记忆模块踩坑实录:靠自动化测试,我把上下文丢失率从 30% 降到 0
前端·css
kismet7871 小时前
fetch 正常,页面却 404?Nuxt 3 + CDN 跨域下的 preload CORS 陷阱
前端·产品
如果超人不会飞1 小时前
新手避坑:使用 TinyRobot 入门阶段常见误区总结
前端·vue.js
嘟嘟07171 小时前
二叉树从入门到实战:四大遍历 + 递归思想详解
前端