前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >exceljs导出多级表头的excel文件[全网首发]

exceljs导出多级表头的excel文件[全网首发]

作者头像
周星星9527
发布2021-11-02 17:56:25
2.7K0
发布2021-11-02 17:56:25
举报

源码:

代码语言:javascript
复制
<template>
  <div class="page_search">
    <el-button type="primary" size="small">新增</el-button>

    <div class="search">
      <el-input
        v-model="search"
        placeholder="请输入名称"
        size="small"
        class="input-with-select"
      >
        <template #append>
          <el-button icon="el-icon-search"></el-button>
        </template>
      </el-input>
    </div>
    <el-button type="primary" class="search" icon="el-icon-share" @click="exportExcel">导出</el-button>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import Excel from "exceljs";

export default {
  setup() {
    const search = ref("");

    const downloadBlob=(arrayList,type,fileName)=>{
        var blob=new Blob(arrayList,{type:type});
        var a = document.createElement('a');  //创建a标签用于下载
        a.download = fileName;
        a.href = URL.createObjectURL(blob);
        document.getElementsByTagName("body")[0].appendChild(a);
        a.click();
        document.getElementsByTagName("body")[0].removeChild(a);
    };

    const exportExcel=async()=>{
      let workbook = new Excel.Workbook();
      let worksheet = workbook.addWorksheet('报表-威尔森',{views: [{showGridLines: true}]});
      let alignObj={alignment:{vertical:'middle',horizontal:'center'}};
      let columns=[{header:"",key:"A",style:alignObj},
        {header:"",key:"B",width:12,style:alignObj},
        {header:"",key:"C",style:alignObj},
        {header:"",key:"D",style:alignObj}];
      worksheet.columns = columns;

      // 开始添加数据
      let data=[
        {A:"COD",B:'',C:"氨氮",D:''},
        {A:"进水",B:"出水",C:"进水",D:"出水"},
        {A:1,B:2,C:3,D:4},
        {A:11,B:2,C:3,D:4},
        {A:1,B:22,C:3,D:4}
      ];
      for(let i in data) {
          worksheet.addRow(data[i]).commit();
      }

      worksheet.mergeCells('A2:B2');
      worksheet.mergeCells('C2:D2');

      worksheet.getRow(2).border={top: {style:'thin'},left: {style:'thin'},bottom: {style:'thin'},right: {style:'thin'}}

      //await worksheet.commit();

      // write to a new buffer
      const buffer = await workbook.xlsx.writeBuffer();
      //console.log(buffer);
      downloadBlob([buffer],"application/octet-stream","data.xlsx");
    };

    return {
      search,exportExcel,
    };
  },
};
</script>

<style scoped>
.page_search {
  margin: 10px;
  display: flex;
  align-items: center;
}
.search {
  margin-left: 10px;
  width: 200px;
}
</style>

至于表格的border还不知道怎么设置好一些。

《传热学》相关小程序演示动画如下(其中下图1D非稳态导热计算发散,调小时间步长后重新计算,结果收敛!):

黑体单色辐射力如下图,可见温度越高,同频率辐射力越大:

关于《(计算)流体力学》相关的几个小程序演示动画如下:

LBM(=Lattice Boltzmann Method)计算得到的圆柱绕流“卡门涡街”演示(由于网格较少,分辨率低,圆柱近乎正方形):

顺便,《(热工过程)自动控制》中关于PID控制器的仿真可点击此处体验:PID控制演示小程序,(PID控制相关视频见:基础/整定/重要补充)。动画如下:

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档