美文网首页
vue 将文件流数据导出下载

vue 将文件流数据导出下载

作者: wxw_威 | 来源:发表于2022-10-31 16:59 被阅读0次

    1、实现导出功能

    // 导出方法
    saveAndExport(content, filename) {
      //接口返回的数据格式是文件流,转成通过标签直接下载
      const blob = new Blob([content])
      const _fileName = filename         
      if ('download' in document.createElement('a')) {
        // 非IE下载
       const elink = document.createElement('a')
        elink.download = _fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
       elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, _fileName)
       }
    }
    // 调用
    function() {
    // 获取文件流
      const content = res.data;              
     // 自定义文件名
      const fileName = 'test.xlsx'         
    // 或者从接口直接获取
      const fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1])                                
      this.saveAndExport(content, fileName)
     }
    

    相关文章

      网友评论

          本文标题:vue 将文件流数据导出下载

          本文链接:https://www.haomeiwen.com/subject/bvlltdtx.html