当前位置: 首页 > news >正文

flask后端+vue前端——后端怎么发文件给前端?

首先,前端axios请求的responseType要设置为blob

const service = axios.create({baseURL: 'http://127.0.0.1/api',timeout: 5000});//向后端发送数据,后端根据这个数据data生成文件返回send_coordinate(data){return service.post('/',data,{responseType: 'blob'});}

然后,后端要返回文件字节流

from flask import Flask,Response@app.route('/', methods=['POST'])
def coordinate():res = request.form['data'] # 取前端数据# 保存为txt文件with open("1.txt", 'w', encoding='utf-8') as f:  f.write(data) # 以字节方式读取with open(filename, 'rb') as f:bytes_data = f.read()# 用Response对象构造返回值,需要指定文件类型return Response(bytes_data, mimetype="text/plain")

接着,前端在axios的then中,把res.data转为Blob对象,然后创建URL,赋值给a标签的href属性

user.send_coordinate(formData).then(res=>{let blob = new Blob([res.data], {type: 'text/plain'}); //这一步是关键this.downloadURL=URL.createObjectURL(blob) // 生成临时URL,赋值给变量this.filedownload=true // 标记变量,显示a标签(下载链接)})

最后,a标签与vue变量如下

<a v-if="filedownload" :href="downloadURL" download="coordinate.txt">下载轨迹文件</a>
export default {name: 'PickTrack',data() {return {filedownload:false,   //是否有文件可下载downloadURL:''        //临时下载链接}},

相关文章:

flask后端+vue前端——后端怎么发文件给前端?

首先&#xff0c;前端axios请求的responseType要设置为blob const service axios.create({baseURL: http://127.0.0.1/api,timeout: 5000});//向后端发送数据&#xff0c;后端根据这个数据data生成文件返回send_coordinate(data){return service.post(/,data,{responseType: …...

计算机毕业设计django+hadoop+scrapy租房可视化 租房推荐系统 租房大屏可视化 租房爬虫 spark 58同城租房爬虫 房源推荐系统

python scrapy bootstrap jquery css javascript html 租房信息数据展示 租房地址数量分布 租房类型统计 租房价格统计分析 租房面积分析 房屋朝向分析 房屋户型平均价格统计分析 房屋楼层统计分析 房屋楼层与价格统计分析 房屋地址与价格统计分析 房屋相关信息词云展示 租房…...

【Tomcat】Mac M3 Pro安装Tomcat7

文章目录 下载配置环境变量修改权限启动和关闭 下载 官网&#xff1a;https://tomcat.apache.org/ cd ~/Library tar -zxvf /Users/用户名/Downloads/apache-tomcat-7.0.99.tar.gz mv apache-tomcat-7.0.99 ~/Library/tomcat配置环境变量 vi ~/.bash_profileexport TOMCAT…...

Spring Boot(八十二):SpringBoot通过rsa实现API加密

项目中使用RSA加密方式对API接口返回的数据加密,让API数据更加安全。别人无法对提供的数据进行破解。Spring Boot接口加密,可以对返回值、参数值通过注解的方式自动加解密 。 下面开始代码演示 1 接口加密 1.1 新建一个springboot项目 1.2 添加依赖 <dependency>&l…...

巴黎奥运启幕 PLM系统助力中国制造闪耀全球

2024巴黎奥运会将于法国当地时间7月26日在塞纳河畔正式开幕。即将亮相巴黎奥运会赛场的除了中国运动员之外&#xff0c;还有一批批中国制造企业为奥运会设计并制造的体育设备也将惊艳亮相&#xff0c;成为赛场上另一道亮丽的风景线。 在新时代的浪潮中&#xff0c;中国制造业坚…...

基于STM32瑞士军刀--【FreeRTOS开发】学习笔记(一)|| RISC / 底层代码执行步骤 / 汇编指令

本篇文章基于韦东山老师讲课笔记和自己理解编写。 RISC ARM芯片属于精简指令集计算机(RISC&#xff1a;Reduced Instruction Set Computing)&#xff0c;它所用的指令比较简单&#xff0c;有如下特点&#xff1a; ① 对内存只有读、写指令 ② 对于数据的运算是在CPU内部实现 …...

【JavaScript】01数组原型对象的最后一个元素、计数器

题目一&#xff1a;数组原型对象的最后一个元素 请你编写一段代码实现一个数组方法&#xff0c;使任何数组都可以调用 array.last() 方法&#xff0c;这个方法将返回数组最后一个元素。如果数组中没有元素&#xff0c;则返回 -1 。 你可以假设数组是 JSON.parse 的输出结果。…...

解决R语言找不到系统库导致的报错

1、基本需知 1.1、系统库 系统库&#xff08;System library&#xff09;是一组预先编写和编译好的软件模块集合&#xff0c;用于支持操作系统的基本功能和提供一些常见的服务。这些库通常由操作系统或第三方开发者提供&#xff0c;并且在系统安装过程中被预装或者用户可以额…...

Java高并发理论基础

并发级别 由于临界区的存在&#xff0c;多线程之间的并发必须受到控制。根据控制并发的策略&#xff0c;我们可以把并发的级别分为 阻塞、无饥饿、无障碍、无锁、无等待 几种。 阻塞 一个线程是阻塞的&#xff0c;那么在其他线程释放资源之前&#xff0c;当前线程无法继续执…...

Spring事件机制

文章目录 一、Spring事件二、实现Spring事件1、自定义事件2、事件监听器2.1 实现ApplicationListener接口2.2 EventListener2.3 TransactionalEventListener 3、事件发布4、异步使用 三、EventBus1、事件模式2、EventBus三要素3、同步事件3.1 定义事件类3.2 定义事件监听3.3 测…...

vue+canvas音频可视化

1.代码 <template><div class"subGuide"><canvas id"canvas"></canvas><br><audio id"audio" src"./audio.mp3" controls></audio></div> </template><script> export…...

俊昭stm32笔记

stm32——中断优先级 stm32——创建基础工程模板stm32——创建基础工程模板-CSDN博客 stm32——MCU启动方式stm32——MCU启动方式_stm32调试时程序启动方式-CSDN博客 stm32——串口stm32——串口_stm32 串口-CSDN博客 stm32——lcd液晶显示stm32——lcd液晶显示-CSDN博客...

W30-python03-pytest+selenium+allure访问百度网站实例

此篇文章为总结性&#xff0c;将pystest、selenium、allure结合起来 功能如下&#xff0c;web自动化&#xff0c;输入baidu网站&#xff0c;搜索“雷军”、打开网页中第一条内容 pytestsel.py如下&#xff1a; import time import re import allure import pytest from tools…...

如何在 Debian 8 上安装和使用 PostgreSQL 9.4

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 关系型数据库是满足多种需求的数据组织的基石。它们支持从在线购物到火箭发射等各种应用。PostgreSQL 是一种历史悠久但仍然活跃的…...

【微信小程序】微信小程序设置本地背景图片在真机无法显示的解决方案

微信小程序设置本地背景图片在真机无法显示的解决方案 在开发微信小程序时&#xff0c;很多开发者会遇到一个常见的问题&#xff1a;在调试环境中设置本地背景图片可以正常显示&#xff0c;但在真机上却无法显示。本文将详细探讨这一问题的原因&#xff0c;并提供三种解决方案…...

Arthas在线诊断案例实战整理

Arthas - Java 应用诊断利器 Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法…...

使用 XRDP 远程linux主机

一、简介 XRDP是一个开源的远程桌面协议&#xff08;Remote Desktop Protocol,RDP&#xff09;服务器&#xff0c;采用的是标准的RDP。 官网地址&#xff1a;https://www.xrdp.org/ github地址&#xff1a; https://github.com/neutrinolabs/xrdp/releases XRDP也是C/S架构&…...

学习小型gpt源码(自用)

数据集构建_哔哩哔哩_bilibili &#xff08;b站上有一系列课&#xff0c;从数据处理到模型构建和训练使用&#xff09; 什么是batch&#xff1f; 为什么一个batch内的句子要一样长&#xff1f; 不同batch的长度可以不一样&#xff0c;但是同一个batch内长度一样&#xff01;…...

@Transactional使用的注意事项

在项目中涉及到CRUD操作时&#xff0c;一般都会在方法上添加该注解&#xff0c;以为加上Transactional&#xff0c;Spring就可以自动帮我们进行事务的开启、提交 有一个很多人都会犯的误区&#xff1a; 将Spring事务与Transactional划上了等号&#xff0c;只要有数据库相关操作…...

快手可灵视频生成大模型全方位测评

快手视频生成大模型“可灵”&#xff08;Kling&#xff09;&#xff0c;是全球首个真正用户可用的视频生成大模型&#xff0c;自面世以来&#xff0c;凭借其无与伦比的视频生成效果&#xff0c;在全球范围内赢得了用户的热烈追捧与高度评价。截至目前&#xff0c;申请体验其内测…...

《B4410 [GESP202509 一级] 金字塔》

题目背景 对应的选择、判断题&#xff1a;https://ti.luogu.com.cn/problemset/1189 题目描述 金字塔由 n 层石块垒成。从塔底向上&#xff0c;每层依次需要 nn,(n−1)(n−1),⋯,22,11 块石块。请问搭建金字塔总共需要多少块石块&#xff1f; 输入格式 一行&#xff0c;一…...

ZeroOmega多代理管理功能全解析:实现智能网络访问控制的核心方案

ZeroOmega多代理管理功能全解析&#xff1a;实现智能网络访问控制的核心方案 【免费下载链接】ZeroOmega Manage and switch between multiple proxies quickly & easily. 项目地址: https://gitcode.com/gh_mirrors/ze/ZeroOmega ZeroOmega作为一款开源的多代理管理…...

1.1 AI技术全景图:从传统ML到大模型

AI技术全景图&#xff1a;从传统ML到大模型本文适合谁&#xff1a;完全没有AI背景的读者。读完这篇&#xff0c;你会知道"AI/机器学习/深度学习/大模型"这几个词是什么关系&#xff0c;以及你将要学的东西在整个AI世界里处于什么位置。AI发展经历了三个时代——本文带…...

全基因组序列比对工具mVISTA的保姆级使用指南:从文件准备到结果解读

全基因组序列比对工具mVISTA的保姆级使用指南&#xff1a;从文件准备到结果解读 在基因组学研究领域&#xff0c;序列比对是揭示物种间进化关系、识别保守区域和功能元件的基础操作。mVISTA作为一款专门用于全基因组序列比对的在线工具&#xff0c;凭借其直观的可视化界面和强…...

Python农业物联网部署突然中断?揭秘土壤传感器数据丢包率超37%的底层时钟漂移根源(附校准代码)

第一章&#xff1a;Python农业物联网部署在现代农业数字化转型中&#xff0c;Python凭借其丰富的物联网生态库&#xff08;如paho-mqtt、Adafruit-IO、RPi.GPIO&#xff09;和轻量级运行特性&#xff0c;成为边缘设备与云平台协同的核心语言。本章聚焦于基于树莓派的土壤温湿度…...

这份榜单够用!盘点2026年用户挚爱的一键生成论文工具

一天写完毕业论文在2026年已不再是天方夜谭。以下是2026年最炸裂、实测能大幅提速的一键生成论文工具&#xff0c;覆盖选题构思、文献综述、数据整理、格式排版等核心场景&#xff0c;高效搞定论文不再只是梦想。 一、全流程王者&#xff1a;一站式搞定论文全链路&#xff08;一…...

统信UOS 1060e内网离线安装Docker保姆级教程(附CentOS 8 RPM包下载)

统信UOS 1060e内网离线安装Docker全流程实战指南 在企业级IT基础设施中&#xff0c;内网环境下的软件部署一直是运维工程师面临的特殊挑战。当服务器完全隔离于互联网时&#xff0c;每一个依赖包、每一条配置指令都可能成为阻碍系统正常运行的潜在障碍。本文将深入探讨在统信UO…...

用Arduino UNO R3和面包板,从零组装你的第一台meArm机械臂(附电源模块避坑指南)

用Arduino UNO R3和面包板&#xff0c;从零组装你的第一台meArm机械臂&#xff08;附电源模块避坑指南&#xff09; 当你第一次看到meArm机械臂灵活抓取物体的视频时&#xff0c;是否也想过自己动手组装一台&#xff1f;作为开源硬件领域的经典项目&#xff0c;meArm以其精巧的…...

AI写论文不再难,4款AI论文生成工具带你开启高效写作之旅!

在2025年愈演愈烈的学术写作智能化趋势中&#xff0c;越来越多的人选择借助AI写论文工具。现实中许多这样的工具在撰写硕士、博士论文等长篇学术作品时&#xff0c;常常缺乏必要的理论深度&#xff0c;逻辑也显得比较松散。普通的AI论文写作工具显然无法满足这些专业写作的需求…...

解构 Claude Code

大多数开发者认为 AI 编码工具就是一个聊天界面。你输入&#xff0c;它回复。你复制代码。你继续前进。 Claude Code 完全不同。 1、传统方式 vs Claude Code 方式 想象雇佣一位聪明的开发者&#xff0c;他他* 每次关闭对话就忘记一切 不知道自己在什么项目除非你每次都描述…...