vue导出excel、txt、csv文件
背景
需求:提供网页 excel、txt、csv 下载功能;
代码
xlsx
安装所需库
# 安装xlsx库
npm install -g xlsx@0.16.0 --save
# 导入XLSX库
import * as XLSX from "xlsx";主要代码
// 以日期结尾的excel文件
createExcel(name, data) {
// 获取当前日期时间
const now = new Date();
// 构建文件名
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
const fileName = `job_${name}${year}${month}${day}.xlsx`;
console.log(fileName); // 输出类似于 "20230828.xlsx"
// 创建工作簿和工作表
// 数据为json格式
const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // Sheet1 是工作表的名称
// 将工作簿写入文件
XLSX.writeFile(wb, fileName); // 文件名为 example.xlsx
}txt
安装所需库
# 安装file-saver库
npm install --save file-saver
# 导入file-saver库
import { saveAs } from "file-saver";主要代码
// 以日期结尾的txt文件
createTXT(name, data) {
// 获取当前日期时间
const now = new Date();
// 构建文件名
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
const fileName = `job_${name}${year}${month}${day}.txt`;
// data为需要输入的字符串,注意需要添加[]
const file = new File([data], fileName, {
type: "text/plain;charset=utf-8",
});
saveAs(file);
}csv
所需库与 txt 相同
// 以日期结尾的csv文件
createCSV(name, data) {
// 获取当前日期时间
const now = new Date();
// 构建文件名
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
const fileName = `job_${name}${year}${month}${day}.csv`;
// 步骤 2: 将数据转换为 CSV 字符串
data = data.map((row) => row.join(",")).join("\n");
const file = new File([data], fileName, {
type: "text/csv",
});
saveAs(file);
}