美文网首页WEB前端笔记本
前端导出通用子组件

前端导出通用子组件

作者: 随行者pgl | 来源:发表于2022-01-05 10:23 被阅读0次
//通用子组件,空模板下载
    Vue.prototype.downloadTem = function(apiurl, fileType) {
      const loading = this.$loading({
        lock: true,
        text: '正在进行文件导出',
        background: 'rgba(0, 0, 0, 0.8)'
      })
      axiosDef.get(apiurl, {
        params: {},
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + (window.localStorage.getItem('token') || '')
        },
        responseType: 'blob'
      }).then(function(res) {
          if (res.status == 200) {
            var fileName = res.headers['content-disposition']
            let fileNameIndex = fileName.indexOf('utf-8?B?')
            if (fileNameIndex != -1) {
              fileName = fileName.substr(fileNameIndex + 8)
              fileName = Base64.decode(fileName)//解码后的文件名
            } else {
              fileName = fileName.substr(fileName.indexOf('filename=') + 9)
            }
            var content = res.data
            var content = res.data
            var csvData = new Blob([content], { type: 'text/csv' })
            // for IE
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(csvData, fileName)
            }
            // for Non-IE (chrome, firefox etc.)
            else {
              var a = document.createElement('a')
              document.body.appendChild(a)
              a.style = 'display: none'
              var url = window.URL.createObjectURL(csvData)
              a.href = url
              a.download = fileName
              a.click()
              a.remove()
              window.URL.revokeObjectURL(url)
            }
          }
          loading.close()
        })
    },
    //excel,数据导出
    Vue.prototype.downloadPostTem = function(apiurl, fileType, data) {
      const loading = this.$loading({
        lock: true,
        text: '正在进行文件导出',
        background: 'rgba(0, 0, 0, 0.8)'
      })
      axiosDef.post(apiurl,data, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + (window.localStorage.getItem('token') || ''),
          'appToken': 'Bearer ' + (window.localStorage.getItem('token') || '')
        },
        responseType: 'blob'
      }).then(function(res) { 
          if (res.status == 200) {
            var fileName = res.headers['content-disposition']
            let fileNameIndex = fileName.indexOf('utf-8?B?')
            if (fileNameIndex != -1) {
              fileName = fileName.substr(fileNameIndex + 8)
              fileName = Base64.decode(fileName)//解码后的文件名
            } else {
              fileName = fileName.substr(fileName.indexOf('filename=') + 9)
            }
            var content = res.data
            var csvData = new Blob([content], { type: 'application/pdf;charset=UTF-8'})
            // for IE
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(csvData, fileName)
            }
            // for Non-IE (chrome, firefox etc.)
            else {
              var a = document.createElement('a')
              document.body.appendChild(a)
              a.style = 'display: none'
              var url = window.URL.createObjectURL(csvData)
              a.href = url
              a.download = fileName
              a.click()
              a.remove()
              window.URL.revokeObjectURL(url)
            }
          }
          loading.close()
        })
    },
    Vue.prototype.openLoading = function() {
      const loading = this.$loading({           // 声明一个loading对象
        lock: true,                             // 是否锁屏
        text: '正在进行数据提交,请耐心等待!',                     // 加载动画的文字
        background: 'rgba(0, 0, 0, 0.8)'       // 背景颜色
      })
      //setTimeout(function() {                  // 设定定时器,超时5S后自动关闭遮罩层,避免请求失败时,遮罩层一直存在的问题
        //loading.close()                        // 关闭遮罩层
      //}, 5000)
      return loading
    }

相关文章

网友评论

    本文标题:前端导出通用子组件

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