uniapp和vue如何使用SheetJS导出excel?
warning:
这篇文章距离上次修改已过193天,其中的内容可能已经有所变动。
在uniapp中使用SheetJS导出Excel文件,你需要先将SheetJS适配到uniapp环境中,然后使用SheetJS的API来创建和导出Excel文件。以下是一个简单的例子:
- 安装xlsx库(SheetJS的uniapp版本):
npm install xlsx
- 在uniapp项目中使用xlsx库导出Excel文件:
// 引入xlsx库
import XLSX from 'xlsx';
export function exportToExcel(data, fileName) {
// 创建工作簿
const wb = XLSX.utils.book_new();
// 将数据转换为工作表
const ws = XLSX.utils.json_to_sheet(data);
// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 生成Excel的配置项
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
// 创建二进制对象并创建url
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
// 创建a标签模拟点击进行下载
const a = document.createElement('a');
if (typeof a.download === 'undefined') {
window.location = url;
} else {
a.href = url;
a.download = fileName + '.xlsx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// 清除blob对象
setTimeout(function() {
URL.revokeObjectURL(url);
}, 100);
}
// 转换s2ab_
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
// 使用示例
const data = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' }
];
exportToExcel(data, 'UserList');
请注意,上述代码可能需要在真机环境下运行,因为H5环境可能不支持Blob对象或者需要额外的库来处理二进制数据。此外,SheetJS的导出功能可能在不同的uniapp版本或者设备上有兼容性问题,因此在实际使用时可能需要进行一些调整。
评论已关闭