前端下载文件so easy ，你还可以这样做

卡诺来了

于 2024-08-15 21:36:24 发布

阅读量192

点赞数 8

分类专栏：解决方案文章标签：前端

本文链接：https://blog.csdn.net/qq_16828223/article/details/141222069

版权

解决方案专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前言

通常情况，下载文件我们需要让后端构建文件，然后将文件流返回进行下载。本文将介绍一种不需要后端构建文件流，前端自行下载文件的方式。

实战案例

将文本卡诺来了下载分别下载至name.txt文件和 name.json中

工具类 file.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}

使用工具

<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>