JS下载文件和图片

做后台管理系统 经常会遇到导出列表excel的功能

一种方法可以用 window.open('下载地址，参数query拼接', '_blank')

还可以你请求服务端接口让你服务端返回给你下载地址 直接下载 不用再地址栏里拼接参数

还有一个就是 首先请求服务端接口 get请求 query参数 请求完成之后 new Blob对象

const blob = new Blob([response.data],{
     type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
      })// type这里表示xlsx类型

    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = '订单记录.xlsx' // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象

下载图片

var img = document.getElementById('testImg') // 获取要下载的图片      var url = img.src // 获取图片地址      var a = document.createElement('a') // 创建一个a节点插入的document      var event = new MouseEvent('click') // 模拟鼠标click点击事件      a.download = '二维码' // 设置a节点的download属性值      a.href = url // 将图片的src赋值给a节点的href      a.dispatchEvent(event) // 触发鼠标点击事件