js导出excel列格宽度_VUE项目，纯前端实现导出EXCEL功能

科技前沿 • 2025-03-26 19:52 • 阅读 50

大家好，我是讯享网，很高兴认识大家。

Excel 导出

Excel 的导入导出都是依赖于js-xlsx来实现的。

在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。

使用

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。

所以你先需要安装如下命令：

讯享网

npm install xlsx file-saver -Snpm install script-loader -S -D

讯享网

由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下：

讯享网import('@/vendor/Export2Excel').then(excel => { 
  
    
   excel.export_json_to_excel({ 
  
    
   header: tHeader, //表头 必填 data, //具体数据 必填 filename: 'excel-list', //非必填 autoWidth: true, //非必填 bookType: 'xlsx' //非必填 })})

参数

参数	说明	类型	可选值	默认值
header	导出数据的表头	Array	/	[]
data	导出的具体数据	Array	/	[]]
filename	导出文件名	String	/	excel-list
autoWidth	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

示例

import('@/vendor/Export2Excel').then(excel => { 
  
    
   const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'] const data = this.list excel.export_json_to_excel({ 
  
    
   header: tHeader, //表头 必填 data, //具体数据 必填 filename: 'excel-list', //非必填 autoWidth: true, //非必填 bookType: 'xlsx' //非必填 })})

excel.vue文件代码

讯享网<template> <div class="app-container"> <div> <el-button @click="handleDownload"> Export Excel el-button> div> <el-table :data="list"> <el-table-col

js导出excel列格宽度_VUE项目，纯前端实现导出EXCEL功能

Excel 导出

使用

参数

示例

相关推荐