LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【JavaScript】WEB纯JS前端实现文件下载,批量下载

admin
2023年8月24日 21:49 本文热度 473

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协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved