【vue】前端下载文件自定义文件名称

2023-11-20

文件下载名称不想和后端提供的URL一样怎么办呢?

1.首先给按钮去绑定一个事件

按钮的处理

 <div  class="list-item-download"
    @click="downLoadArticle(item.url , item.title)
 </div>

2.正常我们的下载处理方式

1.直接通过后端返回的url,给location.href就可以下载了,但是文件名字,就是后端返回的 ,不可以自定义

window.location.href = url

3.自定义下载的文件名字

 onDownFile(url, filename) {
      this.getBlob(url, (blob) => {
        this.saveAs(blob, filename)
      })
},

getBlob(url, cb) {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function() {
        if (xhr.status === 200) {
          cb(xhr.response)
        }
      }
      xhr.send()
},

 saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename)
      }
      else {
        var link = document.createElement('a')
        var body = document.querySelector('body')

        link.href = window.URL.createObjectURL(blob)
        link.download = filename

        link.style.display = 'none'
        body.appendChild(link)

        link.click()
        body.removeChild(link)
        window.URL.revokeObjectURL(link.href)
      }
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【vue】前端下载文件自定义文件名称 的相关文章

随机推荐

  • Java垃圾回收机制(GC)

    一 要回收哪些区域 在JVM内存模型中 有三个是不需要进行垃圾回收的 程序计数器 JVM栈 本地方法栈 因为它们的生命周期是和线程同步的 随着线程的销毁 它们占用的内存会自动释放 所以只有方法区和堆需要进行GC 二 如何判断对象是否存活 1
  • linux 开放端口

    我们可以输入命令查看防火墙的状态 firewall cmd state 如何在CentOS 7下开放8080端口 如果上一步处于关闭状态 输入命令 systemctl start firewalld service 如何在CentOS 7下
  • 计算机毕业设计Node.js+Vue大型零售电商平台——购物车管理子系统(程序+源码+LW+部署)

    该项目含有源码 文档 程序 数据库 配套开发软件 软件安装教程 欢迎交流 项目运行 环境配置 Node js Vscode Mysql5 7 HBuilderX Navicat11 Vue Express 项目技术 Express框架 No
  • 华硕T100HA鼠标乱跳及点击问题解决

    从入手此平板开始就一直有此问题 一直没有解决 今天正好装系统 就顺便解决此问题 一开始打算给这个平板安装Win7 8 网上说装了之后驱动不适配 就此放弃 然后 将系统恢复出厂设置了 然后问题依然在 在网上一直找啊找 终于在百度帖吧里找到问题
  • 人工智能概念

    人工智能概念 人工智能就是用人工方法在机器 计算机 上实现的智能 或称机器智能 即是研究如何用计算机来表示和执行人类的智能活动 以模拟人脑所从事的推理 学习 思考和规划等思维活动 并解决需要人类的智力才能处理的复杂问题 如医疗诊断 管理决策
  • 两个任意长度的长整数相乘(华为oj,C++)

    pre class cpp include oj h include pre
  • 【Android系统蓝牙开发】蓝牙基础知识-蓝牙核心系统架构

    什么是蓝牙 在开启基于蓝牙Spec v5 2的学习前 我们先了解下什么是蓝牙 蓝牙在我们日常生活中又存在哪些实际应用呢 蓝牙无线技术是一种短距离无线通信系统 其核心特性主要是以下三点 robustness 鲁棒性 抗干扰能力强 Low po
  • Python入门—— MySQL-python模块

    MySQL python模块 MySQLdb Python 标准数据库接口为 Python DB API Python DB API为开发人员提供了数据库应用编程接口 可以访问Python数据库接口及API查看详细的支持数据库列表 不同的数
  • Hadoop3 启动服务,提示:Attempting to operate on hdfs namenode as root

    在刚刚安装Hadoop3 环境上 启动Hadoop3 给出如下提示信息 Attempting to operate on hdfs namenode as root 翻译 尝试使用root 账户去操作hdfs namenode 造成原因 缺
  • IEEE 1588-PTP简介

    1 PTP简介 网络测控系统精确时钟同步协议PTP Precision Time Protocol 是一种对标准以太网终端设备进行时间和频率同步的协议 也称为IEEE 1588 简称为1588 1588分为1588v1和1588v2两个版本
  • 树莓派4B安装详细教程,从零开始!

    树莓派4B安装详细教程 从零开始 前言 一 准备材料 1 硬件材料 2 软件材料 二 安装步骤 1 格式化SD卡 2 安装系统 三 安装完成 前言 提示 本文详细介绍树莓派4B的安装流程 适合刚入手树莓派的同学 认为我写的好的同学希望点赞关
  • xxx-0.0.1-SNAPSHOT.jar中没有主清单属性

    添加如下配置即可
  • 算法通关村——二分查找在寻找数组峰顶中的应用

    题目 在数组i的某个位置i 开始 从 0 到 i 都是递增的 从 i 1 都是递减的 请你找到这个最高点 方法一 使用线性遍历实现 分析 最高点如果存在 需要满足arr i 1 lt arr i gt arr i 1 又因为题目说了0到i就
  • 史上最全的Android面试题集锦

    前言 很多人面试之前 可能没有在互联网公司工作过或者说工作过但年头较短 不知道互联网公司技术面试都会问哪些问题 再加上可能自己准备也不充分 去面试没几个回合就被面试官几个问题打蒙了 最后以惨败收场 下述是我收录整理的Android面试题汇总
  • 解决Photoshop无法完成请求,因为找到不知名的或无效的JPEG标识符类型问题

    在我将用微信Alt A截的图到Photoshop的时候出现无法完成请求 因为找到不知名的或无效的JPEG标识符类型问题 如下图 解决办法是 右击图片 用画图打开图片 将图片另存为jpg格式或者png格式即可 再次导入即可成功 具体原因不详
  • 2021年10月中旬—字节AI LAB NLP算法面试题(一)

    问题一 bert的架构是什么 目标是什么 输入包括了什么 三个embedding输入是怎么综合的 Bert的结构主要是Transformer的encoder部分 其中Bert base有12层 输出维度为768 参数量为110M Bert
  • 人工智能-10种机器学习常见算法

    机器学习是目前行业的一个创新且重要的领域 今天 给大家介绍机器学习中的10种常见的算法 希望可以帮助大家适应机器学习的世界 1 线性回归 线性回归 Linear Regression 是目前机器学习算法中最流行的一种 线性回归算法就是要找一
  • 因果推断:因果表征学习的CV落地

    作者 Ostrich 单位 阿里巴巴算法工程师 研究方向 自然语言处理 搜索算法 本文主要梳理因果推断与机器学习相结合的一些比较新的工作思路 也是尝试回答自己在学习因果推断基础知识时的一些疑问 突然 被广泛谈及的因果可以以什么样的方式落地
  • 【BS】compilation debug=true targetFramework=4.0 无法识别的属性“targetFramework”

    一 背景 今天在发布网站的时候遇到这个问题 compilation debug true targetFramework 4 0 无法识别的属性 targetFramework 系统是师哥新做的windows server 2008 图一
  • 【vue】前端下载文件自定义文件名称

    下载文件自定义文件名称 文件下载名称不想和后端提供的URL一样怎么办呢 1 首先给按钮去绑定一个事件 2 正常我们的下载处理方式 3 自定义下载的文件名字 文件下载名称不想和后端提供的URL一样怎么办呢 1 首先给按钮去绑定一个事件 按钮的