首页 > 其他分享 >a标签下载文件设置download无效

a标签下载文件设置download无效

时间:2024-03-19 14:33:07浏览次数:23  
标签:文件 标签 无效 xhr href res download 下载

场景:通过接口获取文件信息,再动态生成a标签,添加href、download,点击文件下载后,文件名并不是设置的download
问题:接口返回数据的文件url域名跟当前系统域名不一致,导致download失效
解决方案:采用原生请求设置responseType来实现指定download下载
<div @click="download">点击下载</div>
...
download () {
  axios.post().then(res => {
    const a = document.createElement('a');
    a.href = res.fileUrl;
    a.target = '_blank';
    a.download = res.fileName;

    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';

    xhr.onload = () => {
      a.href = URL.createObjectURL(xhr.response);
      document.body.appendChild(a);
      a.click();
      a.remove();
    }

    xhr.open('GET', a.pathname);
    xhr.send();
  })
}

标签:文件,标签,无效,xhr,href,res,download,下载
From: https://www.cnblogs.com/sangfall/p/18082758

相关文章

  • HTML表单标签详解:如何用HTML标签打造互动网页?
    在互联网的世界中,表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物,表单都扮演着至关重要的角色。在网页中,我们需要跟用户进行交互,收集用户资料,此时就需要用到表单标签。HTML提供了一系列的表单标签,使得开发者能够轻松地创建出功能丰富的表单。今天......
  • 前端基础之HTML标签基础
    HTML简介什么是HTML站在显示文本内容的角度去看,浏览器与word的原理一样,我们可以将浏览器当成一个网页版的只读word,浏览器也必须有一套自己能识别的标记文本的规范,该规范被称为HTML,HTML全称是超文本标记语言(HyperTextMarkupLanguage)。“超文本”指的是用超链接的方法,将各种......
  • 让图片适应标签的CSS object-fit属性
    在实际的项目运行过程中,可能出现运营人员上传的文件与预期的图片尺寸不同的情况,为了解决这一问题可以使用object-fit属性,对嵌入的图像(以及其他替代元素,如视频)做相应的变化,更加精确地控制图像的展示效果,从而满足多样化的设计需求。让图片适应标签的CSSobject-fit属性1......
  • java实现标签排序置顶
    设计思路置顶:将该数据放到全局数据收尾,其余数据顺序不变【将需要置顶数据的sort设置为全局Min(sort)-1】置尾:将数据放到全局末尾,其余不变【将需要置尾的数据sort设置为全局Max(sort)+1】交换:两位位置交换,其余不变【将需要交换数据的sort互换即可】拖动:局部顺序变化【将4插到1......
  • HTML标签
    目录HTMLHTML标签注释标签标题标签段落标签格式化标签图片标签超链接标签css代码表格标签列表标签表单标签单选框复选框按钮选择文件上传下拉菜单多行编辑框div&spanHTMLHTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以......
  • HTML学习笔记5: table表格标签
    table表格标签tableborder            表格边框的宽度width规定表格的宽度cellspacing规定单元格之间的空隙tr:行td:单元格th:如果是表头单元格,可以替换为th,默认带有加粗和居中展示的效果<tableborder="5px"width="6......
  • HTML学习笔记6: form表单标签
    Form表单标签属性action   规定当提交表单时向何处(URL)发送表单数据如果不指定URL,默认提交到当前页面method   规定用于发送表单数据的方式(默认值是GET)GET  在URL后拼接表单数据:?username=hikaru44&age=2000,URL的长度是有限制的,所以GET没......
  • HTML学习笔记1: 常见标签
    HTML常见标签p段落标签<p>段落内容</p>b加粗标签<b>加粗标签</b>strong加粗+强调标签strong和b在样式上没有什么差别,只是便于强调区分<strong>强调+加粗标签</strong>img图片标签src图片路径(绝对磁盘路径,绝对网页路径,相......
  • HTML进阶版(表单标签、语义化标签、字符实体)
    雷迪斯andthe乡亲们 欢迎你们来到奇幻的编程世界  上一篇我们学习了(列表标签、表格标签)让我来回顾一下吧!列表标签无序列表最常用,有序列表偶尔用,自定义列表底部导航用表格标签①表格基本标签:table>tr>td②表格标题和表头单元格标签:table> caption......
  • HTML常用基础标签:图片与超链接标签全解!
    HTML图片标签和超链接标签是网页开发中常用的两种标签,它们分别用于在网页中插入图片和创建超链接。我们每天都在互联网世界中与各种形式的信息打交道。你是否好奇过,当你点击一篇文章中的图片或链接时,是什么神奇的力量让你瞬间跳转到另一个页面?今天,就让我们一起揭开HTML图片标签......