前端下载文件

下载文件最简单的方式,就是后端提供一个下载地址。前端只需要a链接绑定这个下载地址即可

<a href="下载地址" download>下载</a>

download也可以等于一个值,这个值就是文件名

但是如果后端传给我们的是一个文本或者字节流,则就需要我们用Blob对象再进行一下处理,把后端给的二进制或者文本数据利用Blob对象生成一个下载地址,然后创建a链接,自动触发a链接进行下载

下载json文件

javascript 复制代码
<template>
    <el-button @click="downFile">下载普通文件</el-button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

// 假装这是后端返回的文件内容
const obj = reactive({
    name: 'zs',
    age: 25,
    gender: 1
})

const downFile = () => {
    const blob = new Blob([JSON.stringify(obj)], { type: 'application/json' })
    // console.log(blob) // Blob {size: 33, type: 'application/json'}
    // 创建一个指向类型化数组的 URL 其实就是把上面的blob数据转换为了一个可以下载的url地址
    let href = window.URL.createObjectURL(blob)
    // 下载地址既然有了,那就可以生成一个a标签,直接自动点击下,就可以下载了
    const a = document.createElement('a')
    a.href = href // a链接的下载地址
    a.setAttribute('download', 'data.json') // 把a标签设置为下载,并为文件取名
    document.body.appendChild(a) // 把a链接插入到结构中
    a.click() // 自动点击触发下载
    // 下载完成后,记得移除a标签和释放生成的下载链接
    document.body.removeChild(a)
    window.URL.revokeObjectURL(href)
}
</script>

下载zip文件

javascript 复制代码
<template>
    <el-button @click="downZipFile">下载zip文件</el-button>
</template>

<script setup lang="ts">
import axios from 'axios'

const downZipFile = () => {
    // 请求zip文件数据   记得一定要给axios请求指定为blob
    axios.get('后端给的地址', { responseType: 'blob' }).then((res: any) => {
        // console.log(res)
        // Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取
        const blob = new Blob([res], { type: 'application/zip' })
        // console.log(blob)
        // 创建一个指向类型化数组的 URL 其实就是把上面的blob数据转换为了一个可以下载的url地址
        let href = window.URL.createObjectURL(blob)
        // 下载地址既然有了,那就可以生成一个a标签,直接自动点击下,就可以下载了
        const a = document.createElement('a')
        a.href = href // a链接的下载地址
        // a.setAttribute('download', 'data.zip') // 把a标签设置为下载,并为文件取名
        document.body.appendChild(a) // 把a链接插入到结构中
        a.click() // 自动点击触发下载
        // 下载完成后,记得移除a标签和释放生成的下载链接
        document.body.removeChild(a)
        window.URL.revokeObjectURL(href)
    })
}
</script>

下载其他文件(例如.doc,.xls,.ppt,.tar...)也是同理的,只需要改下Blob里对应的type

下面是office文件所对应的的 Content-type 类型 Content-type 类型总结

office文件所对应的的 Content-type类型Content-type类型总结 - 简书 (jianshu.com)

相关推荐
青灯文案15 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254889 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.21 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营25 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248942 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5