57.表中数据导出excel-526互联

const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, ] 将该数据转换成blob，保存excel

2023/7/20 上午10:44:41

要将该数据转换成 Blob 并保存为 Excel 文件，你可以使用以下代码：

javascriptCopy Code

// 创建一个 Workbook 对象
const workbook = new ExcelJS.Workbook();

// 添加一个工作表
const worksheet = workbook.addWorksheet('Sheet 1');

// 设置表头
const headers = ['Date', 'Name', 'Address'];
worksheet.addRow(headers);

// 添加数据行
tableData.forEach(data => {
  const { date, name, address } = data;
  worksheet.addRow([date, name, address]);
});

// 将 Workbook 导出为二进制数据
workbook.xlsx.writeBuffer().then(buffer => {
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

  // 下载保存文件
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'data.xlsx';
  link.click();
});

请确保在使用此代码之前先安装 exceljs 库。这段代码会创建一个 Excel 文件，并将数据添加到工作表中，然后导出为二进制数据并保存为名为 "data.xlsx" 的 Excel 文件。你可以通过点击下载链接来保存该文件。

2023/7/20 上午10:49:16

如果不使用exceljs，而是使用file-saver和xlsx库该怎么写代码

2023/7/20 上午10:49:30

如果你想使用 file-saver 和 xlsx 库来保存 Excel 文件，可以按照以下方式修改代码：

javascriptCopy Code

// 创建一个 Workbook 对象
const workbook = XLSX.utils.book_new();

// 创建一个工作表
const worksheet = XLSX.utils.json_to_sheet(tableData);

// 将工作表添加到 Workbook
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');

// 将 Workbook 导出为二进制数据
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const excelData = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

// 使用 file-saver 下载保存文件
saveAs(excelData, 'data.xlsx');

在这个例子中，我们使用 xlsx 库的 utils 模块来创建工作表和 Workbook，并将数据转换为 Sheet。然后，使用 file-saver 的 saveAs 函数将 Excel 数据保存为名为 "data.xlsx" 的文件。

确保在使用此代码之前先安装 xlsx 和 file-saver 库。记得引入这两个库的依赖关系：

htmlCopy Code

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.min.js"></script>

这样就可以正常使用上述代码来保存 Excel 文件了。

vue3中的代码如下：

 1 <template>
 2   <div>
 3     <el-button @click="exportExcel">导出Excel</el-button>
 4     <el-button @click="exportExcel2">导出txt</el-button>
 5     <el-button @click="exportExcel3">导出blob-excel</el-button>
 6 
 7     <el-table :data="tableData" style="width: 100%">
 8       <el-table-column prop="date" label="Date" width="180" />
 9       <el-table-column prop="name" label="Name" width="180" />
10       <el-table-column prop="address" label="Address" />
11     </el-table>
12   </div>
13 </template>
14 
15 <script lang="ts" setup>
16 // import { ref } from 'vue';
17 import { ElMessage } from 'element-plus';
18 import FileSaver from 'file-saver';
19 import XLSX from 'xlsx';
20 
21 
22 
23 const tableData = [
24   {
25     date: '2016-05-03',
26     name: 'Tom',
27     address: 'No. 189, Grove St, Los Angeles',
28   },
29   {
30     date: '2016-05-02',
31     name: 'Tom',
32     address: 'No. 189, Grove St, Los Angeles',
33   },
34   {
35     date: '2016-05-04',
36     name: 'Tom',
37     address: 'No. 189, Grove St, Los Angeles',
38   },
39   {
40     date: '2016-05-01',
41     name: 'Tom',
42     address: 'No. 189, Grove St, Los Angeles',
43   },
44 ]
45 // const tableRef = ref(null); // 表格的ref
46 
47 // 导出txt方法
48 const exportExcel2 = () => {
49   var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });
50   FileSaver.saveAs(blob, "hello world.txt");
51 };
52 
53 const exportExcel3 = () => {
54 
55   // 创建一个 Workbook 对象
56   const workbook = XLSX.utils.book_new();
57 
58   // 创建一个工作表
59   const worksheet = XLSX.utils.json_to_sheet(tableData);
60 
61   // 将工作表添加到 Workbook
62   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');
63 
64   // 将 Workbook 导出为二进制数据
65   const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
66   const excelData = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
67 
68   // 使用 file-saver 下载保存文件
69   FileSaver.saveAs(excelData, 'data.xlsx');
70 };
71 
72 
73 // 导出Excel方法
74 const exportExcel = () => {
75   const worksheet = XLSX.utils.json_to_sheet(tableData);
76   const workbook = XLSX.utils.book_new();
77   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
78   XLSX.writeFile(workbook, 'data.xlsx');
79   ElMessage.success('导出成功');
80 };
81 </script>