vue导出Excel表格（超级简洁）

1.下载依赖
2.新建一个js文件夹放编写的js
3.然后再main.js里面引入刚刚写好的那个js文件
4.在页面编写代码

作者呢是使用的一个插件。

1.下载依赖

npm install --save xlsx file-saver

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

在src下面新建就可以

然后再htmlToExcel.js下编写咱们的代码

import FileSaver from 'file-saver';
import 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文件

//全局导出excel
import htmlToExcel from './excel/htmlToExcel';//刚刚写好的那个js文件的路径
Vue.prototype.htmlToExcels = htmlToExcel;

4.在页面编写代码

methods里面编写下面方法

exportExcel() {this.htmlToExcels.exportExcel("涝情处理报告.xlsx", "#vcfResult");//第一个引号里面是表格导出时的名字//第二个是表格的id，这个插件是通过id导出的}

这是我定义的自己表格的id，我在这用的是viewUI，大家用别的，包括原生，ele都可以，id和方法下面一致就可以。

在导出按钮，绑定刚刚的方法名字，通过点击事件触发就可以啦。
效果最后

vue导出Excel表格（超级简洁）相关推荐

vue导出Excel表格全局函数（简洁明了）
vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...
【vue开发】vue导出Excel表格教程demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
vue导出excel表格vue-json-excel（最新超容易详细教程）
最近写一个报名的小程序后台,需要导出页面表格为excel,实现这个功能所以记录一下: 目前大多数采取的都是 xlsx ,我这里使用的是vue-json-excel,相对来说更容易上手实现效果. 安装依 ...
vue导出excel表格并支持样式、行高修改xlsxxlsx-style
前言使用插件xlsx.xlsx-style导出带有样式的表格,两者都可以实现创建excel,但是xlsx免费版仅仅只能做单元格合并,收费版才能设置单元格样式,所以需要用到xlsx-style插件实现 ...
vue 导出excel表格自定义表结构
1.安装插件 npm install js-xlsx file-saver -S npm install script-loader -S -D //它帮我们挂载了,不需要引入到main.js里面 j ...
vue导出excel表格，使用xlsx-style自定义字体样式，字体颜色，合并单元格，单元格填充色
一.需要依赖 npm install xlsx-style --save "^0.8.13" npm install xlsx --save "^0.18.5" ...
vue 导出excel表格 xlsx文件
1 下载 xlsx 插件 npm install -S file-saver xlsx,npm install -D script-loader , //下载这两个 2.下载Blob.js.Expor ...
Vue 导出Excel表格，并实现合并单元格方法
安装依赖 xlsx , file-saver , script-loader 下载Export2Excel.js文件在src下创建目录vassets/Export2Excel.js 下载好的: /* ...
vue导出excel表格，自定义字体样式，字体颜色，合并单元格，单元格填充色-xlsx以及xlsx-style，JSZip为2.XX版本
先装包安装注意 import XLSX from "xlsx-style"报错:This relative module was not found: ./cptable in ...
vue 导出 excel表格
一.安装 npm install -S file-saver xlsx npm install -D script-loader 二.引入 1)在src目录下新建excel文件夹,里面放入Blob.j ...

vue导出Excel表格（超级简洁）

vue导出Excel表格（超级简洁）

1.下载依赖

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

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

4.在页面编写代码

vue导出Excel表格（超级简洁）相关推荐

最新文章

热门文章