1.单个下载

常见的有 txt、png、jpg、zip、tar 等各种文件格式，一部分浏览器是会直接打开链接显示内容的；而另外一部分，浏览器不识别响应头或者不能解析对应的格式，会当做文件直接下载下来了。如：

1.1 使用 location.href

// 适用于浏览器无法识别文件，如果是html、jpg、pdf等会直接解析展示，而不会下载

window.location.href = url;

1.2 使用 window.open

// 适用于浏览器无法识别文件，如果是html、jpg、pdf等会直接解析展示，而不会下载

window.open("http://barretlee.com/test.rar")
// 多个文件下载时禁止打开新窗口
window.open(url, true)

1.3 使用 a 标签

// 适用于单文件下载或需要自定义文件名称,可下载各种类型，图片等会直接解析展示，不会下载

方式一：
<a href="http://barretlee.com/test.rar" download="test.rar" >下载</a>
方式二：
const download = (filename, url) => {
    let a = document.createElement('a')
    a.style = 'display: none' // 创建一个隐藏的a标签
    a.download = filename
    a.href = url
    document.body.appendChild(a)
    a.click() // 触发a标签的click事件
    document.body.removeChild(a)
}

1.4使用Blob实现（可能有空白或乱码问题）

export function download (filename, url) {
  let fileName = `${filename}.jpg`
  let myBlob = new Blob([url], { type: 'image/jpeg' })
  let link = document.createElement('a')
  link.href = URL.createObjectURL(myBlob)
  link.download = fileName
  link.click()
  link.remove()
  URL.revokeObjectURL(link.href)
}

2.支持图片下载

export function download (filename, url) {
  let image = new Image()
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function () {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
    let a = document.createElement('a') // 生成一个a元素
    let event = new MouseEvent('click') // 创建一个单击事件
    a.download = filename || '图片' // 设置图片名称
    a.href = url // 将生成的URL设置为a.href属性
    a.dispatchEvent(event) // 触发a的单击事件
  }
  image.src = url
}

3.支持各类型下载，批量下载

// 单个下载各类型文件
downloadFile (row) {
   this.downloadBatch(row.filePath, (obj) => {
     let a = document.createElement('a')
     let url = URL.createObjectURL(obj)
     a.href = url
     a.download = row.fileName
     a.click()
   })
 },
// 发送请求
downloadBatch (file, callback) {
  let request = new XMLHttpRequest()
  request.responseType = 'blob'
  request.open('GET', file)
  request.addEventListener('load', function () {
    callback(request.response)
  })
  request.send()
},
// 批量下载
downloadAll () {
    for (let i = 0; i < fileList.length; i++) {
       // 调用单个下载方法
      this.downloadFile(fileList[i])
   }
 }

该文章在 2023/8/24 21:53:53 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。