zoukankan      html  css  js  c++  java
  • vue项目中导出Excel文件功能的前端代码实现

    在项目中遇到了两种不同情况,

    1、get请求导出文件,实现起来相对简单

    // 导出数据
    exportData() {
    window.location.href = `/oes-content-manage/role/export-roles?size=${this.totalCount}&sidx=roleName&sord=desc&roleId=${this.searchForm.roleId}`;
    },

    直接把要传递的参数拼接在请求地址url后面即可

    2、post请求方式

    // 查询结果导出
    exportResult() {
    let key;
    let param = {};
    for (key in this.exportParam) {
    if (key == 'page' || key == 'rows') {
    continue;
    } else {
    param[key] = this.exportParam[key]
    }
    }
    exportexcl(param).then(res => {
    var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob); // 创建下载的链接
    downloadElement.href = href;
    downloadElement.download = '导出数据.xlsx'; // 下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); // 点击下载
    document.body.removeChild(downloadElement); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
    })
    },

    这种方式用于传递参数比较多的情况,在这个项目中所传递参数达到了三四十个。

    同时不要忘记在接口加上responseType属性。

    // 查询结果导出
    export function exportexcl(params) {
      return axios.post(servers + '/program/export', params, {
        responseType: 'blob'
      });
    }
  • 相关阅读:
    hdu5014——构造打表找规律
    HDU5124,线段树加离散化
    hdu 3400-三分套三分
    三分法——凸函数求极值问题
    Zoj 3811并查集
    iOS更新之DFU模式和恢复模式
    获取安卓系统版本
    (转)25个增强iOS应用程序性能的提示和技巧--高级篇
    (转)25个增强iOS应用程序性能的提示和技巧--中级篇
    (转)25个增强iOS应用程序性能的提示和技巧--初级篇
  • 原文地址:https://www.cnblogs.com/thinkguo/p/11281919.html
Copyright © 2011-2022 走看看