vue js 页面复杂表头数据原样导出

最新推荐文章于 2024-07-25 14:55:04 发布

一匹有梦想的蜗牛

最新推荐文章于 2024-07-25 14:55:04 发布

阅读量452

点赞数 1

分类专栏：前端知识 java开发心得文章标签： vue java excel js 前端

本文链接：https://blog.csdn.net/lyy19931025/article/details/113975302

版权

本文介绍了如何在Vue.js项目中处理复杂的表头数据导出到Excel。传统的导出方法通常只能处理一级表头，而通过HTML渲染并导出的方式可以解决跨行跨列的复杂表头问题。文章提供了一个使用按钮触发的数据导出示例，并展示了导出效果，实现了无需后台定制，简化了复杂表头的导出操作。

摘要由CSDN通过智能技术生成

PS:开发过程中，很多时候都需要导出页面展示数据到excel，又得表头简单，但是有的表头复杂，涉及到跨行跨列，这种时候就导致，导出数据工作变得复杂起来，传统框架自带的导出功能只能导出一级表头，目前主流的结局办法就是通过后台，利用poi或者阿里封装的easy-excel来进行导出，这样就出现每一个页面表格的表头不一样需要后台重新封住，没办法进行公共方法提炼，难度较大，时间较长，所以介于此种问题，从反面入手，用html的方式来封装渲染数据然后进行导出，这样就不需要每一个都自行封装表头和数据，现代码如下：
1、需要一个按钮，作为数据导出的触发点，写法随意，

那种都行，楼主使用的是vue,实例如下：

<div class="h-menu fn-clear">
   <ul class="h-ul l-tab">
       <li class="icon-search" @click="searchClick()">高级搜索</li>
       <li class="icon-add" @click="exportData(1)">数据导出</li>
   </ul>
</div>

页面效果：