美文网首页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