当前位置: 代码迷 >> 综合 >> js下载文件方式总结
  详细解决方案

js下载文件方式总结

热度:26   发布时间:2024-02-19 15:01:34.0

 1、使用路径只能下载图片:

 downloadByBlob(url,name) {let image = new Image()image.setAttribute('crossOrigin', 'anonymous')image.src = urlimage.onload = () => {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet ctx = canvas.getContext('2d')ctx.drawImage(image, 0, 0, image.width, image.height)canvas.toBlob((blob) => {let url = URL.createObjectURL(blob)this.download(url,name)// 用完释放URL对象URL.revokeObjectURL(url)})}}download(href, name) {let eleLink = document.createElement('a')eleLink.download = nameeleLink.href = hrefeleLink.click()eleLink.remove()},

2、使用路径下载文件(所有文件都可以下载)

let url = window.URL.createObjectURL(new Blob([hreLocal])) //创建下载链接
let link = document.createElement('a') //创建a标签
link.style.display = 'none'  //将a标签隐藏
link.href = url  //给a标签添加下载链接
// 此处注意,要给a标签添加一个download属性,属性值就是文件名称 
否则下载出来的文件是没有属性的,空白白
link.setAttribute('download', name) 
document.body.appendChild(link)
link.click()

3、调接口、传参,下载文件:

axios.post(请求路径URL,{参数}),{responseType:'blob'
}.then((res)=>{this.handledownloadFiles(下载路径)})
//type:application/zip为下载压缩包
handledownloadFiles(data) {//创建下载链接let url = window.URL.createObjectURL(new Blob([data], {type: 'application/zip'}));//创建a标签let link = document.createElement('a');/将a标签隐藏link.style.display = 'none';//给a标签添加下载链接link.href = url;// 此处注意,要给a标签添加一个download属性,属性值就是文件名称否则下载出来的文件是没有属性的,空白白link.setAttribute('download.txt', " ");document.body.appendChild(link);link.click();
},

 

  相关解决方案