zoukankan      html  css  js  c++  java
  • 下载导出Excel

    第一种:直接通过连接下载Excel

    window.location.href = 'https://x.x.x.243/static/sample/template.xlsx';

    第二种:后端返回文件流下载导出Excel

    首先 axios需要设置 responseType: 'blob'

    如果需要自定义下载文件名可以使用elementUI的组件;

    完整代码如下:

    public exportExcel () {
        this.$prompt(' ', 'Please enter the file name :', {
          confirmButtonText: 'confirm',
          cancelButtonText: 'cancel',
          inputPattern: /.*[^s]/, //验证文件名不为空
          inputErrorMessage: 'illegal filename', //文件名不合规报错信息
          inputValue: `xxx-${this.nowDate}` //名字为xxx+现在时间
          // @ts-ignore 
        }).then(({ value }) => {
          let data = {
            method:'post', //请求方式
            url:'url/export', //请求地址
            fileName: value+'.xlsx', //文件名称,此处为上面的inputValue
            params: getNowDate('-') //参数
          }
          this.handleExportExcel(data);
        }).catch(() => {});
      }
    
      public async handleExportExcel(data:any){
        axios({
              method: data.method,
              url: data.url,
              data: data.params,
              responseType: 'blob'  //此处必须设置
          }).then((res) => {
      //以下为下载Excel的代码块流程
    const link = document.createElement('a'); let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;'}); link.style.display = 'none'; link.href = URL.createObjectURL(blob); link.download = data.fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); console.log(res)
    }).
    catch(error => { console.log('error') }); }
     
  • 相关阅读:
    学习随笔
    javaWeb(1)
    javaWeb(3)----EL,JSTL
    开发时要注意的地方!!!
    Mybatis(0)——基础入门,hello,Mybatis! (使用IDEA)
    SpringAOP——通过JdbcTemplate连接数据库,并使用事务(Transactional)(使用IDEA进行编程)
    SpringAOP基础实战知识------hello!AspectJ (使用IDEA进行编程)
    5 jQuery
    4.1 js 配合dom 案例
    4.js
  • 原文地址:https://www.cnblogs.com/yanghana/p/13606334.html
Copyright © 2011-2022 走看看