vue导入导出Excel文件

导出

类型一：通过链接下载

方式一 (不推荐)

html

导出

js

data() {
    return {
        blank:''
    }
},
methods: {
    handleExport () {
        const params = {
            // 导出数据列表时的参数
        }
        const downData = Object.assign({}, params)
        let downStr = '';
        let down_a = document.getElementById('down_a');
        for(name in downData){
            if (downStr.length == 0) {
                downStr = name+'='+downData[name];
            } else {
                downStr = downStr+'&'+name+'='+downData[name]
            }
        }
        this.blank = "_blank";
        // 接口
        down_a.setAttribute('href', '/comment/export?' +downStr);
    }
}

方式二

html

    
    
Loading...

下载

js

data () {
    return {
        isSpinShow: false,
    }
}, 
methods: {
    handleExport () {
        this.isSpinShow = true
        const params = {
            // 导出数据列表时的参数
        }
        axios.get('/export', { params }).then((res) => {
            if (res.status === 200) {
                location.href = res.request.responseURL
                setTimeout(() => {
                    this.isSpinShow = false
                }, 1000)
            }            
        }).catch(() => {
            this.isSpinShow = false
        })       
    }
} 

或者直接通过接口地址下载，不需要通过请求的过程

// 地址定义为统一管理的变量
handleExport () {
    location.href = 'http://142.141.140.26:8080/api/ecm/assetsInventory/export';
}, 

类型二：通过二进制流下载（网关）

注意点：
1、走网关是要带权限信息的，后台没有可直接访问的链接地址，需要在axios中配置
2、文件名称的信息是放在了响应头的content-disposition属性中，但是返回的res中没有这个属性,需要后台设置Access-Control-Expose-Headers : 'content-disposition'
get请求

const pricePriceExcel = 'http://172.16.1.20:3331/safety/safetyExcel'; // 地址

handleExport () {
  // cookie获取权限数据
  let accessToken = cookieOperation.cookie.get('access_token');
  let userId = cookieOperation.cookie.get('userId'); 
  // 请求配置
  let config = {
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      'Authorization': 'Bearer ' + accessToken,
      'createUserIdId': userId,
      'Access-Control-Allow-Origin': true,
      'withCredentials': true,
      'Access-Control-Expose-Headers' : 'Authorization',
      // 'responseType': 'blob'
      // 'responseType': 'arraybuffer'
    },
    responseType: 'blob'        
  };
  let param = '?goodsName=' + this.goodsName;
  this.$http.get(pricePriceExcel + param, config).then(function (res) {        
    const content = res.data;
    const blob = new Blob([content])
    const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '文件.xlsx'
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }        
  })   
},

post请求(不走网关，二进制流格式)

const api = 'http://10.16.60.10:8080/api/ecm/assetsInventoryOutDetails/exportExcel'
const params = [{"assetCode": "1234AAA-BBB",}] // 示例
let config = {
    headers: {
    'Content-Type': 'application/json;charset=UTF-8',            
    'Access-Control-Allow-Origin': true,
    'withCredentials': true,
    'Access-Control-Expose-Headers' : 'Authorization',
    // 'responseType': 'blob'
    // 'responseType': 'arraybuffer'
    },
    responseType: 'blob'        
};
this.$axios.post(api, params, config).then(function (res) {     
    const content = res.data;
    const blob = new Blob([content])
    const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '文件.xlsx'            
    if ('download' in document.createElement('a')) { // 非IE下载
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
    } else { // IE10+下载
    navigator.msSaveBlob(blob, fileName)
    }        
})  

后端代码大致如下：

private static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) {
    try {
        response.setCharacterEncoding("UTF-8");
        response.setHeader("content-Type", "application/vnd.ms-excel");
        response.setHeader("Content-Disposition",
                "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
        workbook.write(response.getOutputStream());
    } catch (IOException e) {
        throw new IllegalArgumentException(e.getMessage());
    }
}

网站导航

网站导航