vue实现导出excel

1、下载依赖：

npm install --save xlsx file-saver

2、新建一个js文件夹放编写的js

outToExcel.js代码，复制即可使用：

import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {// 导出Excel表格exportExcel(name, tableName) {//name表示生成excel的文件名     tableName表示表格的idvar sel = XLSX.utils.table_to_book(document.querySelector(tableName))var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)} catch (e) {if (typeof console !== 'undefined') console.log(e, selIn)}return selIn}
};

3、main.js里面引入刚刚写好的那个js文件

vue2.0写法//全局导出excel
import 文件名 from 刚刚写好的那个js文件的路径
Vue.prototype.outToExcels（取名随意） = 文件名;

vue3.0写法import 文件名from 路径;
createApp(App).config.globalProperties.outToExcels（取名随意） = 文件名;

4、methods方法调用

此处报错，上面的代码已改正

如果使用Element-UI组件，导出Table表格可能报错 TypeError: Cannot read properties of undefined (reading ‘utils‘)

解决办法：把import XLSX from 'xlsx’变成import * as XLSX from ‘xlsx’

然后就是奇迹时刻了：

撒花

vue实现导出excel相关推荐

vue导入导出excel组件封装
vue导入导出excel组件可直接使用参考以下博客,侵删参考的博客 ##一: 项目安装依赖 npm install --save xlsx 在项目中创建文件夹及文件如下图: excel-impo ...
vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
VUE中导出Excel功能的实现
一.在上一篇文章中我们已经完成了WebSql的操作,并且初始化了一些数据,那么如何导出这些数据呢? **当然方法有多种,本次我们采用引入Export2Excel.js的方法 1.添加所需依赖 npm ...
vue快捷导出excel插件
最开始我使用的是知名度高的xlsx插件,但发现他的免费版没办法修改样式,而配合使用xlsx-style又有许多的问题,需要修改源码,使身为小菜鸟的我十分的难受o(╥﹏╥)o 机缘巧合下找到了pikaz ...
vue项目导出Excel表格
我们开发的时候可能需要导出表格,来实现客户的需求,接下来就从vue项目中介绍导出excal表格的方式. 以这个项目为实例来分析,导出就要选择数据,我这里做了全选数据导出和单选数据导出,先开一下如何处理 ...
vue 前端导出Excel表格（基础版 + 多级标题）纯前端导出
先看效果纯前端基础导出的Excel表格纯前端多级表头导出的Excel表格基础导出下面赋源代码 1.安装依赖 npm install vue-json-excel 2.在项目的入口 main.js ...
vue+element 导出Excel
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.步骤 1.引入依赖 2.html代码 3.methods里的方法前言 vue+element 如何导出Excel ...
vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件
// 导出 exportData () { this.$confirm('确认导出XXXXXX?', { confirmButtonText: '导出', cancelButtonText: '取消' ...
Java后端与Vue前端导出Excel表格文件并解决乱码和文件打不开
Java 需要用到 poi 两个依赖包,Maven如下:  &l ...
vue前端导出excel，js-xlsx、xlsxStyle，可设置样式、表格合并；(包含获取excel列数函数、excel合并表格缺少边框处理函数）
工作过程中遇到导出excel,记录以便下次快速开发(会按照table布局(不含table样式,样式需要在样式method添加,commonStyle是默认样式)直接导出excel,包含表格合并布局) ...

vue实现导出excel

vue实现导出excel相关推荐

最新文章

热门文章