目录
案例二引入代码文件dist_xlsx.full.min.js Git地址
前言
此案例未涉及到表格样式,只是做了简单的数据导出,所以简单易懂。
xlsx将表格数据导出的两种常用方式:(需根据具体场景判断使用)
- 直接将数据导出(默认推荐)
- 操作表格导出(若表格有分页状态,则导出数据可能只为当前页数据)
插件安装
首先安装插件xlsx
cnpm install xlsx 或 cnpm install xlsx
本文使用的版本为 npm install xlsx@0.17.1 --save
如果不是vue项目也可在其他vue项目安装xlsx然后在node_modules下的xlsx文件夹下找到dist文件夹下的xlsx.full.min.js,引入到项目中使用。
解决版本不兼容报错
补充:使用xlsx受环境影响导致可能会报错版本不兼容问题
解决方法:
将语法
import XLSX from 'xlsx'
改成
import * as XLSX from 'xlsx'
案例一代码
以下案例是以vue为基础编写(直接将数据导出)
<template>
<div>
<button @click="handelExportEvent">导出表格文件</button>
</div>
</template>
<script>
import XLSX from "xlsx";
/**
* @param dataList 表格数据内容 array
* @param fileName 文件标题。必须以 .xlsx结尾
*/
export default {
data() {
return {
tableData:[{name:'王二蛋',id:'231'},]
}
},
methods: {
downloadXlsx(dataList, fileName) {
const stringToBuff = str => {
let buf = new ArrayBuffer(str.length)
let view = new Uint8Array(buf)
for (let i = 0; i !== str.length; ++i) {
view[i] = str.charCodeAt(i) & 0xff
}
return buf
};
// 创建表格
let workbook = XLSX.utils.book_new();
let worksheet = XLSX.utils.aoa_to_sheet(dataList);
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');
console.log(worksheet); // 初次使用可以观察下转换后的数据结构
// 创建二进制对象写入转换好的字节流
let xlsxBlob = new Blob(
[
stringToBuff(
XLSX.write(workbook, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
})
)
],
{ type: '' }
);
const a = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
a.href = URL.createObjectURL(xlsxBlob);// 创建对象超链接
a.download = fileName
a.click()
},
handelExportEvent() {
//this.tableData表格数据
if (this.tableData.length == 0) {
this.$message.error("当前没有需要导出的数据,请重新搜索后再打印!");
return;
}
let datalist = []; //导出表格表头
datalist.push([
"标题1",
"标题2",
]);
this.tableData.forEach((item, index) => {
datalist.push([
item.name,
item.id,
]);
});
// console.log(this.tableData);
//导出插件使用
this.downloadXlsx(datalist, "文件名.xlsx");
},
},
}
</script>
案例一效果
案例二代码
案例二是以h5为例(操作表格导出数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table id="table1" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>兴趣</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>打游戏</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>88</td>
<td>看电影</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>81</td>
<td>睡觉</td>
</tr>
</tbody>
</table>
<button id="btn" onclick="btn_export()">导出</button>
</body>
<script src="dist_xlsx.full.min.js"></script>
<script>
// ---------------------------------导出xlsx所需方法----------------------------------
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
// -------------------------------获取表格导出数据操作-------------------------------
function btn_export() {
var table1 = document.querySelector("#table1");
var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
openDownloadDialog(sheet2blob(sheet), '下载.xlsx');
}
</script>
</html>
案例二页面展示
案例二导出效果:
案例二引入代码文件dist_xlsx.full.min.js Git地址
dist文件夹下有一个文件xlsx.full.min.js,就是它了,引入到项目中即可。