浏览器a标签下载txt、json文件自动打开预览的问题

背景

由于浏览器的特性.txt .pdf .json 等等文件放在a标签的href属性中会被浏览器直接打开,这时可以给a添加download属性强制下载,但是当执行 跨域下载 文件时download属性就会失效。

解决办法

跨域会导致download属性失效,使用xhr下载方式。

javascript 复制代码
export default function download(url, fileName) {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    xhr.onload = () => {
      const url = window.URL.createObjectURL(xhr.response)
      createAndRemove(url, fileName)
    }
    xhr.send()
  }

  function createAndRemove(url, fileName) {
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = fileName;
    eleLink.style.display = 'none';
    // 下载内容转变成blob地址
    eleLink.href = url;
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
  }
相关推荐
ᥬ 小月亮1 分钟前
webpack基础
前端·webpack
YongGit20 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试