跟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();
            };
            
相关推荐
自然 醒5 分钟前
记录We码开发者工具的一个bug
前端·javascript·bug
葡萄城技术团队7 分钟前
HTML元素单元格:用自定义 CellType 扩展 SpreadJS 的显示能力
前端·javascript·html
不好听6138 分钟前
Fragment:React 的 `<></>` 和原生的 DocumentFragment,同名不同命
前端·react.js·dom
不好听61313 分钟前
useState 完全解析:初始化、异步更新、以及为什么传函数能解决闭包问题
前端·react.js
神明不懂浪漫2 小时前
【第七章】Java中的常用类
java·开发语言·前端·经验分享·笔记
GuWenyue8 小时前
放弃云端API!一套React+WebGPU本地LLM方案,零数据上传、离线可用
前端·人工智能·前端框架
原则猫9 小时前
函数/变量提升
前端
独泪了无痕10 小时前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee11 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户0595401744611 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css