js 文件下载

最新推荐文章于 2024-05-31 10:04:55 发布

鴎鴎鹿鸣

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量143

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/gfhdgo/article/details/126115996

版权

使用axios设置响应的类型为blob类型。下载主要通过创建a标签去读取你的文件。

download() {
    return request({
      url: '接口',
      method: 'get',
      responseType: 'blob'//文件使用读取类型为blob
    }).then(resp => {
      let name = ''
      try {
     //获取你读取文件的名称
        name = resp.headers['content-disposition'].split(';')[1].split('filename=')[1]
      } catch (error) {
        console.log('get file name error')
      }
      const binary = resp.data
      download(binary, name)
    })
  }
}

下载的方法
export function download(binary, fName) {
  const blobURL = window.URL.createObjectURL(new Blob([binary]))
  const tempLink = document.createElement('a')
  tempLink.style.display = 'none'
  tempLink.href = blobURL
//读取你下载文件类型，如果每个读取到就去获取后面的名称 YW_${Date.now()}.docx
  tempLink.setAttribute('download', fName || `YW_${Date.now()}.docx`)
  if (typeof tempLink.download === 'undefined') {
    tempLink.setAttribute('target', '_blank')
  }

  document.body.appendChild(tempLink)
  tempLink.click()
  document.body.removeChild(tempLink)
  window.URL.revokeObjectURL(blobURL)
}