js 前端下载文件 全场景

134 阅读1分钟

文件流下载


 downFile(suffix, res, data) {
      const typename = this.addNameSuffix(
        suffix || 'application/x-download'
      )
      let blob = new Blob([res], { type: typename })
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)

      let fileName = '数据导出' + moment().format('YYYY-MM-DD HH:mm:ss') + '.' + suffix
      // 带名字过来 ,没有名字,  
      if (data) {
        let { name, url } = data
        if (url && (!name || String(name).indexOf('.') < 0)) {
          fileName = url
        }
        if (name) {
          fileName = name
        }
      }
      link.download = fileName
      document.body.appendChild(link)
      link.click()
    },
    addNameSuffix(type) {
      let suffixName = ''
      switch (type.toLowerCase()) {
        case 'png':
          suffixName = 'image/png' //
        case 'rar':
          suffixName = 'application/x-rar-compressed' //
        case 'jpg':
          suffixName = 'image/jpeg' //
        case 'jpeg':
          suffixName = 'image/jpeg' //

        case 'svg':
          suffixName = 'image/svg+xml' //

        case 'tgz':
          suffixName = 'application/x-compressed' //
          break
        case 'docx':
          suffixName =
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document' // docx
          break

        case 'doc':
          suffixName = 'application/msword' // doc
          break

        case 'pdf':
          suffixName = 'application/pdf' // pdf
          break

        case 'xlsx':
          suffixName =
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // '' xlsx
          break

        case 'xls':
          suffixName = 'application/vnd.ms-excel' // xls
          break

        case 'png':
          suffixName = 'image/png'
          break

        case 'zip':
          suffixName = 'application/zip'
          break
      }

      return suffixName
    },

a标签下载(设置oss代理)

 downFileName(fileName, fileUrl) {
      if (fileName) return fileName
      return fileUrl
    },
    aLabelDown(fileName, fileUrl) {
      const proxy = process.env.VUE_APP_OSS_PROXY_URL  // http://oss.ccccentertech.com
      // ng代理的网址域名  
      // fileUrl后台返回的 http://oss.ccccentertech.com/20220725/6a5f.xlsx 
      let url = fileUrl.replace(proxy, '') // 把fileUrl中的域名替换掉 
      console.log(url, 11)
      let name = this.downFileName(fileName, fileUrl)
      setTimeout(() => {
        const a = document.createElement('a')
        a.href = `/oss/${url}` // 设置ng代理 /oss//20220725/6a5f.xlsx 
        // VUE_APP_OSS_PREFIX_URL = '/oss'
        // VUE_APP_OSS_PROXY_URL ='http://oss.cmscentertech.com'
        /**vue.config.js
        proxy: {
          [process.env.VUE_APP_OSS_PREFIX_URL]: { 
            target: process.env.VUE_APP_OSS_PROXY_URL, // http://oss.ccccentertech.com
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              [process.env.VUE_APP_OSS_PREFIX_URL]: ''
              }
            },
      }
        **/
        a.download = name
        document.body.appendChild(a)
        a.click();
        URL.revokeObjectURL(`/oss/${url}`);
        a.remove();
      }, 1000);
    },