js下载文件修改文件名（跨域）

原创于 2022-02-25 14:01:05 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一种解决A标签无法直接下载文件，尤其是跨域情况下的解决方案。通过创建XMLHttpRequest对象，设置响应类型为blob，然后利用window.URL.createObjectURL创建下载链接，并动态设置A标签的href和download属性，最终触发点击下载。这种方法允许用户自定义文件名并成功下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pdf下载，由于a标签直接给download不生效，小编试了以下方法可以解决跨域的修改文件名。

<a ref="signUrl" href="javascript:void(0)" @click="download('文件地址', 文件名, 'pdf')" size="small">下载</a>


this.downloadstatus // 这个判断是由于以下方法会存在一直调用加的限制，每点击一次生效一次。
download (fileUrl, fileName, ext) {
      if (this.downloadstatus === 0) {
        let siag = this // 由于下列方法改变this指向另存一下
        let x = new XMLHttpRequest()
        x.open('GET', fileUrl, true)
        x.responseType = 'blob'
        if (siag.downloadstatus === 0) {
          x.onload = function (e) {
            let url = window.URL.createObjectURL(x.response)
            siag.$refs.signUrl.href = url
            siag.$refs.signUrl.download = fileName + '.' + ext
            siag.$refs.signUrl.target = '_blank'
            siag.downloadstatus = 1
            siag.$refs.signUrl.click()
          }
        }
        x.send()
      } else if (this.downloadstatus === 1) {
        this.downloadstatus = 0
      }
},