下载.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'	//这个很重要
	})
相关推荐
山河木马几秒前
无框架-原生webGL渲染-底层入门-1
前端·javascript·webgl
jingling555几秒前
Flutter | 商城项目鸿蒙(OpenHarmony)适配实战
android·开发语言·前端·flutter·华为·harmonyos
郝学胜_神的一滴1 分钟前
系统设计 014:缓存深度实战:如何用 Cache 优雅优化数据库读写?
前端·后端·面试
光影少年3 分钟前
react状态管理
前端·react.js·前端框架
小李云雾3 分钟前
深入浅出 Vue 3 核心知识点:从基础到实战
前端·javascript·vue.js·程序人生
小雨下雨的雨4 分钟前
房产登记交易系统鸿蒙PC Electron框架技术实现详解
前端·华为·electron·harmonyos·鸿蒙·鸿蒙系统
Cobyte6 分钟前
16.响应式系统比对:链表如何实现 computed 的高效更新
前端·javascript·vue.js
踩着两条虫6 分钟前
开源 AI 低代码平台 VTJ.PRO 双版本齐发:核心引擎 v0.17.1 与在线平台 v2.4.1 正式上线,强化团队协作与 AI 资产管理
前端·人工智能·低代码·架构·开源
坏柠8 分钟前
从一个设备控制面板开始,系统学习 LVGL 界面开发
android·javascript·学习
JAVA9659 分钟前
JAVA面试-并发篇 06-ReentrantLock如何实现公平锁的以及可重入吗
java·开发语言·面试