前端对文件流做出导出操作

最新推荐文章于 2024-08-06 17:17:37 发布

涳涳嘚慌

最新推荐文章于 2024-08-06 17:17:37 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/oschina_41767564/article/details/105140566

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

content-disposition

前后端先约定好返回头部信息content-disposition

在这里插入图片描述

注意处理好返回值，把响应头信息返回

// 以axios为例子
// 返回拦截器
axios.interceptors.response.use(
  (response) => {
    return Object.assign(response.data,{headers:response.headers});
  },
  (error) => {
    throw error;
  }
)

相关方法

// 格式化文件流下载content-disposition的filename值
//headers为请求返回的header
export function formatFileName(headers) {
  const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  const contentDisposition = decodeURIComponent(headers['content-disposition'])
  const result = patt.exec(contentDisposition)
  let fileName = result[1]
  fileName = fileName.replace(/\"/g, '')
  return fileName
}

// blob文件下载
//blob为返回文件流；filename为文件名信息
export function download(blob, fileName) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName)
  } else {
    var link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

方法调用demo

async downloadFile(id) {
      try {
        const res = await fileDownloadFile({ id: id })
        const fileName = formatFileName(res.headers)
        download(res, fileName)
      } catch (error) {}
    }