让Excel导出和Vue本地文件保存与导出变得简单

2024-02-15 12:44:35

我们之前的项目是前端使用Vue，服务端使用Node.js，而Excel导出功能我们已经使用了一年多，主要用于图片导出和文本导出。本文将分享一些我们实践过程中遇到的问题和解决方案，希望对大家有所帮助。

Excel导出

1. 使用库

首先，我们需要一个库来帮助我们导出Excel。有很多可用的库，但我们最终选择了使用XLSX库。XLSX库是一个非常流行的库，它可以帮助我们轻松地创建和编辑Excel文件。

2. 创建Excel文件

使用XLSX库创建Excel文件非常简单。我们只需要创建一个新的工作簿，然后添加工作表。我们可以使用以下代码来创建一个新的工作簿：

const xlsx = require('xlsx');
const workbook = xlsx.utils.book_new();

添加工作表也很简单，我们可以使用以下代码来添加一个新的工作表：

const worksheet = xlsx.utils.aoa_to_sheet([
  ['姓名', '年龄', '性别'],
  ['张三', 20, '男'],
  ['李四', 22, '女']
]);

3. 设置单元格样式

我们还可以使用XLSX库来设置单元格样式。例如，我们可以使用以下代码来设置单元格背景色：

const cell = worksheet['A1'];
cell.s = {
  fill: {
    patternType: 'solid',
    fgColor: { rgb: 'FF0000' }
  }
};

4. 导出Excel文件

最后，我们需要将Excel文件导出到本地。我们可以使用以下代码来导出Excel文件：

xlsx.writeFile(workbook, '文件路径');

5. 服务端接口

我们在服务端通过node.js，将excel文件保存在本地，然后将保存路径返回给前端，如下：

app.post('/export', async (req, res) => {
  const data = req.body;
  const workbook = xlsx.utils.book_new();
  const worksheet = xlsx.utils.aoa_to_sheet(data);
  xlsx.writeFile(workbook, './public/export.xlsx');
  res.json({ path: '/public/export.xlsx' });
});

Vue前端本地保存文件并导出

1. 下载文件

在Vue前端，我们可以使用以下代码来下载文件：

const url = '文件路径';
const link = document.createElement('a');
link.href = url;
link.download = '文件名';
link.click();

2. 本地保存文件

在Vue前端，我们可以使用以下代码来本地保存文件：

const blob = new Blob([文件内容], { type: '文件类型' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = '文件名';
link.click();