-
Use a third-party library
-
In-use project import
import FileSaver from "file-saver";
import XLSX from "xlsx";
import {
write } from "xlsx-style";
import {
s2ab } from "@/utils/util";
- corresponding code
// s2ab方法
export function s2ab(s) {
let buf = new ArrayBuffer(s.length);
let view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
// 假设有以下数据需要导出
const data = [
{
name: '张三', age: 18, gender: '男' },
{
name: '李四', age: 20, gender: '女' },
{
name: '王五', age: 22, gender: '男' },
];
let headerReplace = {
};
headerReplace.name = "姓名";
headerReplace.age = "昵称";
headerReplace.gender = "手机号";
//数据源
const sheet = [headerReplace, ...data];
// 创建一个sheet表格 使用json_to_sheet, 数据格式比较为 数组包对象, 不然会报错
const worksheet = XLSX.utils.json_to_sheet(sheet, {
// 这里可以通过设置header, 来对导出数据 列 顺序的排序
// 实测可以只写一部分, 也可以整体排序
// ["id", "name", "age"] 相当于把上面整个表头给限制顺序了
header: [],
// 跳过 Header, 就是把原来表格数据的表头去掉了, headerReplace渲染的数据 "冒充" 表头了
skipHeader: true,
});
//为单元格加上样式
// 设置样式
for (let [key, value] of Object.entries(worksheet)) {
if (key.startsWith("!")) continue;
// value是一个单元格对象（Cell Objects）,s表格为样式对象（Style Objects）
value.s = {
alignment: {
vertical: "center", horizontal: "center" },
border: {
},
};
}
worksheet["!cols"] = [{
wpx: 150},{
wpx: 150},{
wpx: 150}] // 表格对应宽度
// 简单理解为在内存中 创建一个xlsx 文件
const newWorkBook = XLSX.utils.book_new();
// 把worksheet添加到workbook中
XLSX.utils.book_append_sheet(newWorkBook, worksheet, "SheetJS");
// 写入文件, 是否直接下载或选择下载到指定路径取决于浏览器的下载设置, 后面的是文件名称和后缀
When Google Chrome is opened, select the download path as shown, otherwise download directly.
// 导出表格，这种导出的表格是不会有样式的，就是一个只有数据的表格。
// XLSX.writeFile(newWorkBook, `活动报名人员.xlsx`);
// 如果要样式，需要用xlsx-style的write方法
// 将工作簿转换为二进制数据
let wopts = {
bookType: "xlsx", bookSST: false, type: "binary" };
let wbout = write(newWorkBook, wopts);
// 否则 使用
// const wbout = XLSX.write(newWorkBook, wopts);
// 导出表格
FileSaver.saveAs(new Blob([s2ab(wbout)], {
type: "" }), `表格.xlsx`);