vue 导出excel表格

进阶de程序猿

于 2021-05-19 14:33:44 发布

阅读量214

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_45101496/article/details/117028710

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现导出Excel表格的功能，详细讲解了相关依赖的安装及具体实现代码，帮助开发者实现数据导出的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘自 https://blog.youkuaiyun.com/romeo12334/article/details/88820962

依赖安装

npm install --save xlsx

实现代码

// 导出// template
<el-botton @click="export">export</el-button>
<el-table id="table">...</el-table>

// script
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
    AssetsExport() {
      let table = document.getElementById('table');
      let worksheet = XLSX.utils.table_to_sheet(table);
      let workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
      // 以上四行也可以直接一行搞定，如果不需要对表格数据进行修改的话
      // let workbook = XLSX.utils.table_to_book(document.getElementById('table'))
      try {
        	XLSX.writeFile(workbook, 'text.xlsx');
        	// table.xlsx 为导出的文件名，可自定义
      	} catch (e) {
        	console.log(e, workbook);
      	}

    },