在大量的项目开发和使用过程中，我们经常会遇到需要将某些数据导出为excel的操作，这里介绍一个很简单的导出方案——xlsx。。。

插件安装

网络好就直接使用

npm install xlsx -S

网络不好就使用

cnpm install xlsx -S

如果编辑器里安装过VUE的相关模块，也可以直接修改package.json文件，找到dependencies节点，然后向里面添加对应模块的名称和版本信息就好，如

/*
...
*/"dependencies": {/*...*/"xlsx": "^0.13.5"},
/*
...
*/

（这里稍微多提一点其他的，因为写这个功能的时候查询到的其他博主的文章基本都会使用一个叫file-saver的插件来完成文件的保存下载，所以这里推荐在没有在用的其他平替的情况下，也使用这个插件。以下的介绍中也会使用该插件来完成文件下载保存。插件的安装方法与xlsx一样的，把上述的名字换了就好，我这边使用的版本是2.0.5。。。）

安装完成之后我们直接开始使用，这里只介绍最简单最基本的入门使用方案，详细的可以搜索其他相关博文或者直接去js-xlsx官网看看一下

使用方法

在需要使用的vue页面里引入该插件，以vue2举例

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

将插件引入项目之后，我们只需要使用到xlsx里面最基本的两个方法就好，先上使用方法：

let et = XLSX.utils.table_to_book(this.execContent(), { sheet: 'Sheet JS', raw: true })

这段代码里，我们使用到了XLSX.utils.table_to_book这个方法，这段方法的意思是根据HTML中的table元素来生成表单。这个方法涉及到两个参数，第一个参数是指要转为excel表单的内容，第二个参数是指对该表单的设置。

我在这里传入的第一个参数是通过JavaScript选择器对页面上的数据节点直接筛选过后，保留下的需要进行导出的那一部分，后面的设置第一个是表单名称，第二个是代表数字数据不转为科学计数法的。

execContent(){const content = document.body.cloneNode(true).getElementsByClassName('要导出的table的类名')[0]/*这里可以对要打印的内容进行一下筛选....*/ return content;
}

在使用XLSX.utils.table_to_book方法之后，会根据我们传入的两个参数，实例化出一个表单对象。那么下一步我们就需要实例化一个工作簿，然后将刚才的表单对象写入到工作簿当中。

let etout = XLSX.write(et, {bookType: 'xlsx',bookSST: true,type: 'array'})

这段代码里，我们使用了XLSX.write方法，这段方法的主要工作就是根据表单创建一个工作簿。这里会需要传入两个参数，第一个是之前创建好的表单，第二个则是对这个工作簿的设置。以上我们就完成了一个简单的使用xlsx根据页面上的内容创建一个excel的需求。

接下来我们需要将生成的excel导出下载。这里我们使用file-saver插件来完成。

FileSaver.saveAs(new Blob([etout], {type: 'application/octet-stream'}),'表名.xlsx'
)

file-saver插件提供了一个saveAs的方法，可以将一个Bolb格式的数据下载到本地。该方法设计到两个参数。第一个参数是一个要保存的Blob对象，第二个是该对象的名称。

除了上述提到的table_to_book方法之外，其余还有类似：

table_to_book：将html中的table元素转为一个工作簿

table_to_sheet：将html中的table元素转为一个表单

oa_to_sheet：将一个数组转为一个表单

oa_to_book：将一个数组转为一个工作簿

json_to_sheet：将一个json对象转为一个表单

json_to_book：将一个json对象转为一个工作簿

用法方面基本大差不差的，推荐可以根据自己的使用场景搜索相关的博文介绍，也可以直接去官网查看相关的用法和例子：SheetJS Community Edition | SheetJS Community Edition

在VUE项目中导出excel——简单使用xlsx相关推荐

node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）
方法一.vue+js-xlsx 1.vue项目内安装两个依赖:xlsx.file-saver npm install xlsx --save npm install file-saver --sa ...
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
下载项目中的excel模板文件.xlsx后，无法打开的问题
题外话:通常在导入Excel文件时,会定义一套模板文件,让用户按此模板文件规定的内容进行填写,可以高效导入数据的同时,也利用Excel本身的功能,制定一些规则提示.有效性校验等,减少在代码中校验的繁琐 ...
Vue项目中指定区域的表格数据导出为Excel文件
vue项目中导出excel时有是会需要指定导出的区域如下图操作部分我们不需要导出只导出表格部分简记录下实现过程赋代码一. 安装三个依赖项 npm install -S file-saver np ...
vue项目中，导出下载Excel表格
方法: // 导出详情数据exportExcel() {const data = {time_type: '',type_id: this.activity_type,activity_id: thi ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
vue项目中实现下载后端返回的excel数据表格
查看更多资源 1. 案例简介: vue项目中,客户端需要实现以excel表格形式下载数据,后端为java,接受请求 >> 读取数据库 >> 生成excel >> 返 ...
vue中导出Excel表格
vue中导出Excel表格项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体 ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...

在VUE项目中导出excel——简单使用xlsx

插件安装

使用方法

在VUE项目中导出excel——简单使用xlsx相关推荐

最新文章

热门文章