【JavaScript】WEB纯JS前端实现文件下载,批量下载
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
1.单个下载1.1 使用 location.hrefwindow.location.href = url; 1.2 使用 window.openwindow.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 编辑过 |
关键字查询
相关文章
正在查询... |