前言
通常情况，下载文件我们需要让后端构建文件，然后将文件流返回进行下载。本文将介绍一种不需要后端构建文件流，前端自行下载文件的方式。
实战案例
将文本卡诺来了下载分别下载至name.txt文件 和 name.json中
- 工具类
file.ts
ts
代码解读
复制代码
/** * 前端下载工具 * * @param fileName 文件名 * @param data 文件内容 * * @author 卡诺来了 */ const frontendDownload = function (fileName: string, data: string) { // 创建了一个新的 <a>（链接）元素 const a = document.createElement('a') // href 设置一个数据URL（将数据进行URL编码）。当触发这个链接时，浏览器会尝试下载该数据 a.setAttribute('href', `data:text/plain;charset=UTF-8,${encodeURIComponent(data as string)}`) // 在新标签页中打开 a.setAttribute('target', '_blank') // 设置下载文件的名称 a.setAttribute('download', fileName) // 将 <a> 元素添加到文档的 <body> 中 并模拟点击 document.body.appendChild(a) a.click() // 释放URL对象，减少内存使用 URL.revokeObjectURL(a.href) // 移除 <a> 元素 document.body.removeChild(a) } export {frontendDownload}
- 使用工具
html
代码解读
复制代码
<script setup lang="ts"> import { frontendDownload } from './file' </script> <template> <el-button @click="frontendDownload('name.txt', '卡诺来了')">前端下载 [name.txt]</el-button> <el-button @click="frontendDownload('name.json', JSON.stringify({name: '卡诺来了'}))">前端下载 [name.json]</el-button> </template>
总结
在开发中。比如：将一个对象数据下载到文件中。数据已经在前端展示了，这个时候如果没有特殊需求，我们可以直接通过上述方式在前端就可以搞定。
原文链接：https://juejin.cn/post/7403186246127960098
更多八股文信息【点击此处】
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
