美文网首页
Vue封装exports导出

Vue封装exports导出

作者: Zxy_i | 来源:发表于2020-05-26 15:27 被阅读0次

一.创建exports.js文件

export default {
            // 导出
      exports(data,url,name='光储充能源一体化') {
                    //data 接口参数
                   //url  接口地址
                   // name 导出的文件夹名称
        function createObjectURL(object) {
          return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
        }
        let xhr = new XMLHttpRequest();
        let day = new Date();  //创建当前时间
        xhr.open('post', url);
        xhr.setRequestHeader("Content-type","application/json")
        xhr.setRequestHeader("Authorization", sessionStorage.getItem('Authorization'));     //设置token
        xhr.responseType = 'blob';

         xhr.onload = function(e) {
          if (this.status == 200) {
            let blob = this.response;
            let filename = name + day.toLocaleDateString();  //文件名+当前时间
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, filename);
            } else {
              let a = document.createElement('a');
              let url = createObjectURL(blob);
              a.href = url;
              a.download = filename;
              document.body.appendChild(a);
              a.click();
              window.URL.revokeObjectURL(url);
            }
          }
        };
        xhr.send(data);
      },


}

二.需要的页面移入exports.js文件

<template>
<div> 
 <el-button  @click="exportsClick"> </el-button>
</div>
</template>
<script>
  import Exs from '../../utils/exports.js'
  export default {
  data() {
 return {}
 },
 methods: {
      exportsClick() {        //导出

                let name='电站台账';     //定义文件名称
                let da = [ "1","2"  ];   // da 为接口参数( 需要导出数据的 id )
                        
          exs.exports(JSON.stringify( da ), '/power/exportPower',name)


      },

}

}

</script>

相关文章

网友评论

      本文标题:Vue封装exports导出

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