xlsx插件将页面表格导出为xlsx文件格式简单案例

目录

前言

插件安装

解决版本不兼容报错

案例一代码

案例一效果

案例二代码

案例二页面展示 

案例二导出效果： 

案例二引入代码文件dist_xlsx.full.min.js Git地址

---

前言

此案例未涉及到表格样式，只是做了简单的数据导出，所以简单易懂。

xlsx将表格数据导出的两种常用方式：（需根据具体场景判断使用）

• 直接将数据导出（默认推荐）
• 操作表格导出（若表格有分页状态，则导出数据可能只为当前页数据）

插件安装

首先安装插件xlsx

cnpm install  xlsx 或 cnpm install  xlsx
本文使用的版本为 npm install [email protected] --save

如果不是vue项目也可在其他vue项目安装xlsx然后在node_modules下的xlsx文件夹下找到dist文件夹下的xlsx.full.min.js，引入到项目中使用。

解决版本不兼容报错

补充：使用xlsx受环境影响导致可能会报错版本不兼容问题

 解决方法：

将语法
import XLSX from 'xlsx'
改成
import * as XLSX from 'xlsx'

案例一代码

以下案例是以vue为基础编写（直接将数据导出）

案例一效果

案例二代码

案例二是以h5为例（操作表格导出数据）

  
  
  
  



  

    

      

        
序号
        
姓名
        
年龄
        
兴趣
      
    
    

      

        
1
        
张三
        
18
        
打游戏
      
      

        
2
        
李四
        
88
        
看电影
      
      

        
3
        
王五
        
81
        
睡觉
      
    
  

  导出

案例二页面展示 

案例二导出效果： 

案例二引入代码文件dist_xlsx.full.min.js Git地址

GitHub地址

dist文件夹下有一个文件xlsx.full.min.js，就是它了，引入到项目中即可。