下载.txt文件 方法有哪些?

1.1. a标签行内 默认 :get请求

html 复制代码
<a href="your-file.pdf" download="desired-filename.pdf">下载文件</a>

1.2. a标签另一种方式

html代码 👇

html 复制代码
<button onclick="downloadCSV()">下载CSV文件</button> 

js代码👇

javascript 复制代码
function downloadCSV() {  
    // 示例CSV数据  
    var csv = "姓名,年龄,职业\n张三,30,软件工程师\n李四,25,数据分析师";  
  
    // 创建一个Blob对象  
    var blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });  
  
    // 创建一个指向Blob的URL  
    var url = URL.createObjectURL(blob);  
  
    // 创建一个a标签并设置属性  
    var a = document.createElement("a");  
    a.href = url;  
    a.download = "example.csv"; // 设置下载文件名  
    document.body.appendChild(a); // 将a标签添加到body中(虽然这一步并非必需,但可以避免某些浏览器的安全限制)  
    a.click(); // 模拟点击以触发下载  
  
    // 清理:从body中移除a标签,并释放URL对象  
    document.body.removeChild(a);  
    window.URL.revokeObjectURL(url);  
} 

2、下载文件 post 请求

html代码👇

html 复制代码
<div @click="downloadData">
    下载表格数据
</div>

js代码👇

javascript 复制代码
    downloadData() {
      downloadData().then(res => {
        // 假设 data 是返回来的二进制数据 const data = res.data
        const url = window.URL.create0bjectURL(
          new Blob([data],{ type: "a application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
        )
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'excel.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },

index.js接口文件👇

javascript 复制代码
   export function getDownloadData (data) {	
	 return request({	
	   url: '/soft/downloadApi',	
	   method: 'post',	
	   data: data,	
	   responseType:'blob'	//这个很重要
	})
相关推荐
codingWhat33 分钟前
uniapp 多地区、多平台、多环境打包方案
前端·架构·node.js
H04836 分钟前
symbol为什么说是为了解决全局变量冲突的问题
javascript
HelloReader36 分钟前
从 Tauri 2.0 Beta 升级到 2.0 Release Candidate Capabilities 权限前缀与内置 Dev Server 网络策略变
前端
只与明月听1 小时前
RAG深入学习之Chunk
前端·人工智能·python
一枚前端小姐姐2 小时前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
HelloReader2 小时前
Tauri 1.0 升级到 Tauri 2.0从“能跑”到“跑得稳”的迁移实战指南(含移动端准备、配置重构、插件化 API、权限系统)
前端
Always_Passion2 小时前
FE视角下的Referrer全面解析
javascript·面试
JunjunZ2 小时前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
_Eleven2 小时前
React 19 深度解析:Actions 与 use API 源码揭秘
前端
七牛云行业应用2 小时前
大模型接入踩坑录:被 Unexpected end of JSON 折磨三天,我重写了SSE流解析
javascript·人工智能·代码规范