vue 导入导出

导出

适用于 各种文件格式，包括但不限于：excel / word / zip …

// 导出
exportExcel() {
 this.onDownFile(`http://192.168.0.154:8085/intelligentSafetyService/siteInspection/siteInspectionLibrary/exportLibraryData`,
                `导出文件${this.formatTime(new Date())}`,
            );
        },

// 下载
onDownFile(url, filename) {
    // 传入url和下载的名字
    this.getBlob(url, (blob) => {
    	this.saveAs(blob, filename);
    });
 },

getBlob(url, cb) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('token', Cookie.get('token'));
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send();
    xhr.responseType = 'blob';
    xhr.onload = function () {
    if (xhr.response.size > 0) {
           return cb(xhr.response);
        }
          alert('导出失败');
     };
},

这里 GET请求方式可以改成POST，xhr.send(); 可以添加携带的参数，比如：xhr.send(JSON.stringify(this.selectedRowKeys));

saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, filename);
      } else {
          let link = document.createElement('a');
          let body = document.querySelector('body');
		  link.href = window.URL.createObjectURL(blob);
          link.download = filename;
		  link.style.display = 'none';
          body.appendChild(link);
          link.click();
          body.removeChild(link);
          window.URL.revokeObjectURL(link.href);
      }
},

导入

以ant为例，用官方的组件库中的a-upload，执行 httpRequest方法

<a-upload action="#" :customRequest="httpRequest" :showUploadList="false">
     <a-button icon="upload" type="primary">导入</a-button>
</a-upload>

// 导入
httpRequest(file) {
   const formData = new FormData();
   formData.append('file', file.file);
		axios.post(`${this.GLOBAL.URL}/intelligentSafetyService/siteInspection/siteInspectionLibrary/importLibraryData`, formData).then((res) => {
                file.onSuccess(file.file);
                if (res.data.success) {
                    this.$message.success(res.data.message);
                } else {
                    this.$message.error(res.data.message);
                }
            });
        }

6.26新增需求，导出进度条
代码进行优化及调整
我是用ant的ui组件库，随便写了个转动
为什么不用进度条形式是因为后台接口返回的数据xht获取不到数据大小，无法确定进度，就用了‘加载中’来替代，因为老项目很多地方用到，并且没封装组件，就把样式写成行内样式了。

<!-- 下载动画 -->
    <a-modal :visible="downState" :title="null" :footer="null" :closable="null">
        <div style="display: flex;justify-content: center; align-items: center;">
          <a-spin />
        </div>
    </a-modal>

在原有代码基础上修改了下，主要优化了接口返回状态值200 才可以下载，非200就会弹窗提示导出失败；
优化了 如果下载文件格式为json格式也会提示导出失败；
优化了箭头函数 ，如果使用老方法this指向问题会拿不到数据，用箭头函数完美解决；

xhr.onload = (event) =>
xhr.onload = function ()

// 下载
    onDownFile(url, filename) {
      this.getBlob(url)
        .then((blob) => {
          const contentType = blob.type;
          if (contentType.includes('application/json')) {
            alert('导出失败');
          } else {
            this.saveAs(blob, filename);
          }
        })
        .catch(() => {
          alert('导出失败');
        });
    },
// post
 getBlob(url) {
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.setRequestHeader('token', Cookie.get('token'));
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.responseType = 'blob';
        this.downState = true;

        xhr.onload = (event) => {
          console.log('event=', event);
          this.downState = false;
          if (xhr.status === 200) {
            resolve(xhr.response);
          } else {
            reject();
          }
        };

        xhr.onerror = () => {
          reject();
        };

        xhr.send(JSON.stringify(this.selectedRowKeys));
      });
    },
   //get
   getBlob(url) {
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader('token', Cookie.get('token'));
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.responseType = 'blob';
        this.downState = true;

        xhr.onload = (event) => {
          console.log('event=', event);
          this.downState = false;
          if (xhr.status === 200) {
            resolve(xhr.response);
          } else {
            reject();
          }
        };

        xhr.onerror = () => {
          reject();
        };

        xhr.send();
      });
    },

进度条内容可以大家根据自己的接口返回数据来获取，event.lengthComputable我的接口数据获取的是false，如果是true才可以去查看下载进度！

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log('下载进度：' + percentComplete + '%');
  }
};