关于js文件下载重命名的问题

先说一下出现问题的情况,首先是文件上传的时候后端会给文件添加一个时间戳,另外由于文件服务器的地址不同,导致跨域的问题,使得a标签的download="filename"不生效

参考https://www.jianshu.com/p/6545015017c4

解决方案:

1不跨域的情况

  <a href="url" download="filename" />

  但是注意download属性的兼容性,可以参考w3c文档内容

解决方案:

2:跨域情况下

 1  /*
 2         * 获取blob
 3         * @params {String} url文件地址
 4         * @{params} {String}  filename重命名名称
 5         * @return {Promise}
 6         */
 7         download (url, filename) {
 8             this.getBlob(url).then(blob => {
 9                 this.saveAs(blob, filename)
10             })
11         },
12         getBlob (url) {
13             return new Promise(resolve => {
14                 const xhr = new XMLHttpRequest()
15                 xhr.open('GET', url, true)
16                 xhr.responseType = 'blob'
17                 xhr.onload = () => {
18                     if (xhr.status === 200) {
19                         resolve(xhr.response)
20                     }
21                 }
22                 xhr.send()
23             })
24         },
25         saveAs (blob, name) {
26             const link = document.createElement('a')
27             link.href = window.URL.createObjectURL(blob)
28             link.download = name
29             link.click()
30         },

 

posted @ 2019-11-15 11:56  lishun123  阅读(528)  评论(0编辑  收藏  举报