前后端分离项目--下载功能

news2024/9/20 19:06:37

文章目录

    • 不使用代理服务器
      • blob
        • blob构造函数
        • 通过FormData对象的getBlob方法创建Blob对象
        • 将Blob对象转换成UR
    • 使用代理服务器

前后端分离项目中下载与其他接口的使用不同,一般下载不走node,不通过代理服务器,而是直接在前台发送请求,又因为前端使用的是代理服务器,会出现跨域问题,需要后端协助,允许下载文件接口跨域

不使用代理服务器

axios({
    method: 'GET',
    url: `url`,  // 后端下载接口
    headers: {
        token: token
    },
    params: {
        fileId: id
    },
    // 后端返回的是二进制数据,请求的响应类型为二进制数据,如果不加下载的文件是乱码
    responseType: 'blob'   
}).then(res => {
    let file = res.data
    let disposition = (res.headers['content-disposition']).split('=')
    let filename = disposition[1] //文件名
    const blob = new Blob([file])
    let url = URL.createObjectURL(blob)
    // 创建下载链接
    let downloadLink = document.createElement('a');
    downloadLink.href = url
    downloadLink.download = filename; // 设置文件名
    // 添加到页面并模拟点击下载rendering
    document.body.appendChild(downloadLink);
    downloadLink.click();
    // 清理下载链接
    document.body.removeChild(downloadLink);
})
  .catch(err => {
      console.log(err)
  })

blob

blob表示二进制的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。
Blob 对象含有两个属性:size 和 type。其中 size 属性用于表示数据的大小(以字节为单位),type 是一个字符串。

blob构造函数
const blob = new Blob([file])
通过FormData对象的getBlob方法创建Blob对象
const formData = new FormData();
formData.append('file', file);
const blob = formData.getBlob('file');
将Blob对象转换成UR
const url = URL.createObjectURL(blob)

使用代理服务器

如果用node,浏览器端还需要判断下载文件类型,从而添加对应的content-type和拓展名,如果后端返的全是200,还可能出现没有文件,下载下来是下图这样的
在这里插入图片描述浏览器端

function fileDownload() {
    const fileDwon = document.querySelectorAll('.fileDwon')
    console.log(fileDwon);
    fileDwon.forEach(function (value) {
        value.addEventListener('click', function () {
            let id = value.id
            console.log(id);
            download({
                method: 'GET',
                url: `/downLoadFile`,
                params: {
                    id: id
                },
                responseType: 'blob',
            }).then(res => {

                let file = res.data;
                const blob = new Blob([file])
                let url = URL.createObjectURL(blob)
                console.log(blob);
                // 创建下载链接
                var downloadLink = document.createElement('a');
                downloadLink.href = url
                downloadLink.download = `${res.headers.filename}.doc`; // 设置文件名
                // 添加到页面并模拟点击下载
                document.body.appendChild(downloadLink);
                downloadLink.click();
                // 清理下载链接
                URL.revokeObjectURL(url);
                document.body.removeChild(downloadLink);
            })
            .catch(err => {
                    console.log(err)
            })
        })
    })
}

服务器端

// 下载文件
router.get('/downLoadFile', async (req, res) => {

    let fileId = req.query.id
    let token = req.headers.token
    const url = `http://123.57.144.143:8080/warmHeartDownload/downLoadFile`;
    try {
        const pipelineAsync = promisify(pipeline);
        const response = await fetch(url, {
            headers: {
                token
            },
            params: {
                fileId: fileId
            },
        });

        if (!response.ok) {
            console.error('获取失败');
        }
        await pipelineAsync(response.body, res);

    } catch (error) {
        console.error('Download error:', error);
        res.status(500).send('Error downloading file');
    }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2149772.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

人工智能安全治理新篇章:《2024人工智能安全治理框架1.0版》深度解读@附20页PDF文件下载

在数字化浪潮席卷全球的今天,人工智能(AI)技术正以前所未有的速度融入我们的日常生活,从智能助手到自动驾驶,从医疗诊断到金融风控,AI的身影无处不在。然而,技术的双刃剑特性也让我们不得不面对…

3657A/B/AM/BM矢量网络分析仪

苏州新利通 3657A/B/AM/BM 矢量网络分析仪 3657系列矢量网络分析仪适用于无线通信、有线电视、教育及汽车电子等领域,可用于对滤波器、放大器、天线、电缆、有线电视分接头等射频元件的性能测量。该产品采用Windows操作系统;具有误差校准功能、时域功能…

Java基础面试必知:HashMap的数据结构与扩容机制

Java基础面试必知:HashMap的数据结构与扩容机制 在Java开发中, HashMap是使用最为广泛的数据结构之一,它提供了基于键值对的快速存取功能。然而,在面试中,经常会涉及到HashMap的底层实现原理,特别是其数据…

Abp vNext(五)集成MQTTnet,可收发消息

一 前言 MQTT的相关理论内容这里不做过多介绍,请看下面两篇文章: Introduction MQTT协议中文版 MQTT协议-CSDN博客 这篇文章只做代码实现,文章中使用MQTTnet作为MQTT开发的组件。 MQTT分为服务端和客户端,一个服务端对应多个…

Docker + Win 10 学习记录

下载Docker Release notes | Docker Docs 推荐使用4.33版本,最新的Docker版本在win10 22H2无法安装。需要升级到win11. 查看Win10版本是否与最新版的Docker兼容 运行 win R, 然后输入winver 如果你的Docker版本无法在当前的win10安装,请更…

编码器-解码器架构_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录一、引言编码器解码器合并编码器和解码器小结练习答案1. 编码器和解码器是否必须是同一类型的神经网络?2. 除了机器翻译,还有其它可以适用于“编码器-解码器”架构的应用吗? 一、引言 正如我们…

LocalDateTime,OffsetDateTime和ZonedDateTime(上)

图片来源:https://www.cnblogs.com/yourbatman/p/14324575.html 一. LocalDate和LocalTime LocalDate:代表不含时区信息的日期,它只能表示年、月、日。它适用于记录一个日子,比如生日、纪念日、或者任何只需要日期而不需要具体时…

除猫毛用粘毛器还是宠物空气净化器?希喂/米家/352/范罗士/有哈空气净化器对比

微博之夜,明星互送礼物环节,要求所有嘉宾准备一份礼物,再由其他明星随机抽取互换礼物。田曦薇送粘毛器可是引起了广泛的争议和批评。不说价格,粘毛器对咱养猫人来讲还真是刚需啊。我朋友家三只猫,出门不用说啥&#xf…

掌握数据中心虚拟化:关键挑战与解决方案

数据中心虚拟化是使用云软件平台将物理数据中心转变为数字数据中心的过程,使企业能够远程访问信息和应用程序。它包括在数据中心内创建物理基础设施的多个虚拟版本,通过将服务器、存储和网络等资源划分为虚拟实体来实现资源的高效利用。 虚拟化环境中的关…

[c++进阶(八)]STL容器适配器之queue

1.前言 和stack一样,队列也没有把他放在容器的一栏里面,而是把他放在容器适配器的一栏。这也是因为queue是使用了别人的相关接口,空间然后来封装自己的内容,最后再给上层用户使用。 2.队列 队列的性质就是先进先出,他…

【C++ 学习】多态的基础和原理(10)

目录 前言1. 概念2. 多态的定义及实现2.1 多态的构成条件2.2 虚函数2.3 虚函数重写2.4 虚函数重写的例外2.4.1 协变2.4.1 析构函数的重写 2.5 多态调用和普通调用2.6 函数重写/函数隐藏/函数重载 的对比2.6.1 函数重写2.6.2 函数隐藏2.6.3 函数重载 2.7 C11 final 和override 3…

HT326 免电感滤波2x20W D类立体声音频功放

特点 输出功率(BTL模式) 2x20W (VDD14.5V,RL4Ω,THDN1%) 单电源系统: 4.5V-18V; 超过90%效率,无需散热器 扩频功能,免电感滤波 模拟差分/单端输入可选 增益:32dB 保护功能:过压/过流/过热/欠压异常,直流检测 和短路保护 无铅无卤封装&#x…

three.js 热力图

使用three.js 和 heatMap.js 实现在 三维场景中展示热力图的效果,以下代码复制粘贴即可在你的本机运行。 在线编辑运行预览可方位 https://threehub.cn/#/codeMirror?navigationThreeJS&classifyexpand&idheatmap3D 在 https://threehub.cn 中还有很多案例…

[PTA]7-3 乘法口诀数列

[PTA]7-3 乘法口诀数列 输出格式: 在一行中输出数列的前 n 项。数字间以 1 个空格分隔,行首尾不得有多余空格。 输入样例: 2 3 10 输出样例: 2 3 6 1 8 6 8 4 8 4 样例解释: 数列前 2 项为 2 和 3。从 2 开始&#…

Java集合(三)

目录 Java集合(三) Java双列集合体系介绍 HashMap类 HashMap类介绍 HashMap类常用方法 HashMap类元素遍历 LinkedHashMap类 LinkedHashMap类介绍 LinkedHashMap类常用方法 LinkedHashMap类元素遍历 Map接口自定义类型去重的方式 Set接口和Ma…

grafana 使用常见问题

一、点击 panel 没有反应,没有出现 edit 选项。 方法一 将鼠标放在 panel 的任意位置,然后键盘输入 "e",然后再次点击 title,即可出现选项框。 方法二 F12 查看当前 panel id,然后在浏览器 url 地址上拼接…

探索AI大模型的未来:电信运营商与云服务商的新征途@附58页PDF文件下载

在数字化浪潮的推动下,人工智能(AI)大模型正成为推动行业变革的关键力量。近日,腾讯云联合中国信通院及中国通信标准化协会发布了《2024年AI大模型应用发展研究报告》,深入探讨了电信运营商与云服务商在AI大模型领域的…

Unicode与UTF-8的关系

Unicode又称统一码,万国码。uni是一个英文词根,原型是one, 表示“单一, 一个”,所以unicode本意是“一个码”,就是让每个字符都有一个唯一的编码。它就像个武林盟主,把世上所有的语言符号一勺烩,一统了编码…

反相求和电路设计

1 简介 该电路可对两个输入信号进行求和(相加),并将其在输出端反相。输入信号通常要求低阻抗源,因为该电路的输入阻抗由输入电阻R1和R2决定。反相放大器的共模电压等于连接到同相节点的电压。 2 设计目标 2.1 输入 2.2 输出 2.3…

9.4 溪降技术:带包下降

目录 9.4 携包下降概述观看视频课程电子书:携包下降在瀑布中管理背包扔背包滑索传送背包固定到安全带 V7 提示:将背包固定到安全带总结 9.4 携包下降 概述 在水流和悬崖边缘携包下降是最危险的情况! 正如我们之前所学,在峡谷探险中…