在纯前端导出文件的一种常见方法是通过生成下载链接来实现，可以使用Blob对象和URL.createObjectURL()方法来实现,因为现在工作中主要运用的前端框架是Angular，这篇文章将以angular为例进行阐述。

一、示例代码

1. 首先，安装FileSaver库（https://github.com/eligrey/FileSaver.js/）来方便地处理文件下载：

npm install file-saver --savenpm install xlsx --savenpm install xlsx-js-style --save

2. 在你的Angular组件中，导入必要的模块和依赖项：

import { Component } from '@angular/core';import { saveAs } from 'file-saver';import * as XLSX from 'xlsx';import * as XLSXStyle from 'xlsx-js-style';

3. 创建一个函数来生成和导出文件：

exportFile() { // 创建需要导出的数据 const data = '这是要导出的纯前端内容。'; // 将数据保存为Blob对象 const blob = new Blob([data], { type: 'text/plain;charset=utf-8' }); // 使用FileSaver库保存Blob对象为文件 saveAs(blob, '导出文件.txt');}

4. 在组件的模板中添加一个按钮或其他交互元素，并将函数绑定到点击事件上：

<button (click)="exportFile()">导出文件</button>

        按照上述方法，当用户点击按钮时，将会触发exportFile()函数，生成并下载一个名为"导出文件.txt"的文件，其中包含指定的纯前端内容。

二、导出数组数据并带有表格样式的文件的完整代码

import { Component } from '@angular/core';import * as XLSX from 'xlsx';import * as XLSXStyle from 'xlsx-js-style';import { saveAs } from 'file-saver';@Component({ selector: 'app-root', template: ` <button (click)="exportExcel()">导出Excel</button> `})export class AppComponent { exportExcel() { // 创建一个工作簿 const workbook = XLSX.utils.book_new(); // 创建一个工作表 const worksheet = XLSX.utils.json_to_sheet( [{ Column1: 'Value1', Column2: 'Value2', Column3: 'Value3' },] ); // 设置每列的宽度 const columns = [ { wch: 15 }, { wch: 15 }, { wch: 15 }, ]; worksheet['!cols'] = columns; // 设置边框样式 const range = XLSX.utils.decode_range(worksheet['!ref']); for (let R = range.s.r; R <= range.e.r; ++R) { for (let C = range.s.c; C <= range.e.c; ++C) { const cellAddress = { c: C, r: R }; const cellRef = XLSX.utils.encode_cell(cellAddress); const cell = worksheet[cellRef]; if (cell) { cell.s = { border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' }, }, }; } } } // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 生成Excel文件 const excelBuffer = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'array' }); const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats- officedocument.spreadsheetml.sheet' }); saveAs(excelBlob, 'filename.xlsx'); }}

        其中exportExcel方法还可以按照以下写来设置到处表格的样式：

        特别注意：有数据的才会样式才会生效。比如，设置了表格的边框，但是某栏没有数据，那么边框这个样式就不会生效。解决这个问题的方法是：在处理数据的时候，在数据后面多加一个选择 “ || ' ' ”，这样xlsx默认该栏是有数据的，只是该数据是空字符串！

exportData(data: any[]) { // 创建一个工作簿对象 const workbook = XLSX.utils.book_new(); // 将数据转换为工作表对象 const worksheet = XLSX.utils.json_to_sheet(data); // 设置单元格样式 const cellStyle = { alignment: { wrapText: true // 设置内容可以换行 }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } }; // 遍历工作表中的每个单元格，应用样式 Object.keys(worksheet).forEach((cell) => { if (cell !== '!ref') { worksheet[cell].s = cellStyle; } }); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 生成Excel文件 const excelBuffer = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'array' }); const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats- officedocument.spreadsheetml.sheet' }); saveAs(excelBlob, 'filename.xlsx');}

注意：导出数组数据处理方法总共有两个，json_to_sheet , aoa_sheet。下面说一下两个方法的区别：

json_to_sheet 和 aoa_to_sheet 方法是 xlsx 库中用于创建工作表的两种不同方式。json_to_sheet 方法接受一个 JSON 数组作为参数，将其转换为适用于工作表的数据格式。每个对象数组的元素都会成为工作表中的一行，对象的键将成为工作表的列标题。这个方法适用于将 JSON 数据直接转换为工作表。aoa_to_sheet 方法接受一个二维数组（Array of Arrays，简称 AoA）作为参数，将其转换为适用于工作表的数据格式。数组中的每个元素都会成为工作表中的一行，数组的元素将成为工作表的单元格的值。这个方法适用于将已经存在的二维数组转换为工作表。以下是两种方法的示例使用：const XLSX = require('xlsx');const jsonData = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }];const aoaData = [ ['id', 'name'],//导出文件的表头 [1, '张三'], [2, '李四'], [3, '王五']];const worksheet1 = XLSX.utils.json_to_sheet(jsonData);const worksheet2 = XLSX.utils.aoa_to_sheet(aoaData);在这个示例中，jsonData 是一个包含对象的 JSON 数组，aoaData 是一个二维数组。我们分别使用 json_to_sheet 和 aoa_to_sheet 方法将它们转换为工作表。需要注意的是，aoa_to_sheet 方法在转换时不会自动为每一行添加列标题，因此需要在传递给方法的二维数组中包含列标题。而 json_to_sheet 方法会根据对象的键自动添加列标题。

三、扩展（导出对象、数组等结构数据并分为多个sheet的方法）

1.导出对象，按照id分为多个sheet

const XlsxStyle = require('xlsx-js-style');const data = { 1: [ { id: 1, name: '张三' }, { id: 1, name: '王五' } ], 2: [ { id: 2, name: '李四' }, { id: 2, name: '钱七' } ], 3: [ { id: 3, name: '赵六' } ]};const fileName = 'output.xlsx';function exportDataToXlsx(data, fileName) { const workbook = XlsxStyle.utils.book_new(); for (const key in data) { if (data.hasOwnProperty(key)) { const dataArray = data[key]; const worksheet = XlsxStyle.utils.json_to_sheet(dataArray); XlsxStyle.utils.book_append_sheet(workbook, worksheet, key); } } XlsxStyle.writeFile(workbook, fileName);}

2.导出数组数据，并分为多个多个sheet

import * as XLSX from 'xlsx';const data = [ [ ['姓名', '年龄', '性别'], ['张三', 20, '男'], ['李四', 25, '女'] ], [ ['城市', '人口'], ['北京', 21540000], ['上海', 24240000] ]];const sheetNames = ['Sheet1', 'Sheet2'];const fileName = 'output.xlsx';function exportToXlsx(data: any[][][], sheetNames: string[], fileName: string) { const workbook = XLSX.utils.book_new(); for (let i = 0; i < data.length; i++) { const worksheet = XLSX.utils.aoa_to_sheet(data[i]); XLSX.utils.book_append_sheet(workbook, worksheet, sheetNames[i]); } XLSX.writeFile(workbook, fileName);}exportToXlsx(data, sheetNames, fileName);

        上面的对象、数组是模拟了文件数组，至始至终都没有读取和处理文件数据的情况

3.导出读取到的文件数据，并分为多个sheet

const XLSX = require('xlsx');function readDataFromXlsx(filePath) { const workbook = XLSX.readFile(filePath); const sheetNames = workbook.SheetNames; const data = {}; sheetNames.forEach(sheetName => { const worksheet = workbook.Sheets[sheetName]; const dataArray = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); data[sheetName] = dataArray; }); return data;}function exportDataToXlsx(data, fileName) { const workbook = XLSX.utils.book_new(); for (const key in data) { if (data.hasOwnProperty(key)) { const dataArray = data[key]; const worksheet = XLSX.utils.json_to_sheet(dataArray); XLSX.utils.book_append_sheet(workbook, worksheet, key); } } XLSX.writeFile(workbook, fileName);}const filePath = 'data.xlsx';const data = readDataFromXlsx(filePath);const fileName = 'output.xlsx';exportDataToXlsx(data, fileName);

四、处理真正的文件数据

        上面的第三点中提到的内容都是用数组数据模拟了文件数据，那如果是真正的文件数据，我们该怎么处理呢？其实，所谓真正的文件数据指的就是，要导出的文件数据来自于调用API后端返回的数据。一般来说后端返回的数据一般是base64格式的格式，我们要做的就是将其进行转换成Blob格式的，然后在转成我们真正需要的数据格式，这个时候就可以对其返回的数据进行处理，当然，也可以不处理直接导出来，如果没有特别的需求，我们都是可以直接导出后端返回的数据的。

下面是一个在Angular中简单的示例：

import { Injectable } from '@angular/core';import * as XLSXStyle from 'xlsx-js-style';import { saveAs } from 'file-saver';@Injectable({ providedIn: 'root'})export class FileService { constructor() { } downloadExcelFromBase64(base64Data: string) { this.fileService[后端url].subscrible(httpResponse => { if (httpResponse.type === 4) { const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); const reader = new FileReader(); reader.onload = (event) => { if(reader.result){ const data = new Uint8Array(reader.result as ArrayBuffer); const workbook = XLSXStyle.read(data, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const dataArray = XLSXStyle.utils.sheet_to_json(worksheet, { header: 1 }) console.log('Excel file content:', dataArray); //到这步之后我们就可以对后端的数据进行处理了，因为dataArray就是后端返回的数据的json格式，我们可以对其进行必要的处理 //当然如果你不想要处理数据直接导出也可以，下面是直接导出的代码 生成Excel文件 const excelBuffer = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'array' }); const excelBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); saveAs(excelBlob, 'filename.xlsx'); } }; setTimeout(() => { reader.readAsArrayBuffer(blob); }) } }) }}

五、一些知识点（插件之间的区别）

1. xlsx.writeFile()和saveAs()

        实际上，xlsx.writeFile()也可以导出文件，但为什么我们前端常用saveAs()来导出文件呢？

xlsx.writeFile()是XLSX库提供的方法，用于将工作簿对象写入文件。它接受两个参数：工作簿对象和文件路径。这个方法将在服务器端生成文件并将其保存在指定路径上。saveAs()是FileSaver库提供的方法，用于将Blob对象保存为文件。它接受两个参数：Blob对象和文件名。这个方法将在客户端下载文件，而不需要将文件保存在服务器上。

两个方法的选择取决于你的需求和使用场景：

如果你想在服务器上生成文件并将其保存在特定路径上，那么使用`xlsx.writeFile()`是一个不错的选择。如果你想在客户端下载文件，而不需要将文件保存在服务器上，那么使用`saveAs()`是一个更好的选择。

2. xlsx-style和xlsx-js-style

        xlsx插件本身是不能导出带有样式的excel文件的，如果要实现将导出的文件设置预期的样式，我们需要安装其他插件，但是一提到xlsx的样式插件我们一般就会想到xlsx-style，但是我比较推荐xlsx-js-style这个插件，下面是两个插件之间的区别：

xlsx-style是一个基于xlsx库的扩展，它提供了一些额外的方法来设置单元格和范围的样式。它可以用于在Excel文件中设置字体、填充、边框等样式。然而，xlsx-style插件已经很久没有维护了，可能不支持最新的xlsx库版本。

xlsx-js-style是另一个基于xlsx库的扩展，它提供了类似于xlsx-style的功能，可以用于设置单元格和范围的样式。与xlsx-style不同的是，xlsx-js-style是最新的库，仍在积极维护和更新。

        所以，总的来说，根据当前的情况，xlsx-js-style是更好的选择，因为它是最新的库，并且仍在维护和更新。它与最新版本的xlsx库兼容，并提供了更多的功能和改进。

3.只使用xlsx-js-style用来导出文件的弊端

        假如我们并不是真正处理文件数据，只是需要将页面table的对象、数组结构的数据进行导出，我们可以只使用xlsx-js-style插件，但是有几点需要注意：

使用`xlsx-js-style`插件仅导出文件可能存在以下一些弊端：1. 无法读取和处理Excel文件的数据：`xlsx-js-style`插件专注于提供更丰富的样式设置功能，但并不提供读取和处理Excel文件数据的功能。如果你需要读取和处理Excel文件中的数据，你仍然需要使用`xlsx`库。2. 缺少其他Excel文件处理功能：`xlsx-js-style`插件只提供了样式设置功能，而没有提供其他Excel文件处理功能，如合并单元格、设置列宽、设置打印区域等。如果你需要这些功能，你仍然需要使用`xlsx`库。下面是一个具体的例子，演示了使用`xlsx-js-style`插件导出文件的限制：import * as XLSXStyle from 'xlsx-style';const workbook = XLSXStyle.utils.book_new();const worksheet = XLSXStyle.utils.aoa_to_sheet([ ['姓名', '年龄', '性别'], ['张三', 20, '男'], ['李四', '', '女'], ['王五', 30, '男']]);const cellStyle = { font: { bold: true }, fill: { fgColor: { rgb: 'FFFF00' } }};XLSXStyle.utils.sheet_set_range_style(worksheet, 'A1:C1', cellStyle);XLSXStyle.utils.sheet_set_range_style(worksheet, 'A2:C4', cellStyle);XLSXStyle.utils.book_append_sheet(workbook, worksheet, 'Sheet1');const fileName = 'output.xlsx';const wbout = XLSXStyle.write(workbook, { bookType: 'xlsx', type: 'binary' });function s2ab(s: string): ArrayBuffer { 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 blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });saveAs(blob, fileName);//在上面的示例中，我们使用`xlsx-js-style`插件设置了Excel文件的样式，但没有读取或处理Excel文件中的数据。如果我们想要读取或处理Excel文件中的数据，例如计算每个人的年龄总和，我们需要使用`xlsx`库的其他功能来实现：import * as XLSX from 'xlsx';const workbook = XLSX.readFile('input.xlsx');const worksheet = workbook.Sheets['Sheet1'];const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });let ageSum = 0;for (let i = 1; i < data.length; i++) { const age = data[i][1]; if (typeof age === 'number') { ageSum += age; }}console.log('年龄总和：', ageSum);在上面的示例中，我们使用`xlsx`库的`readFile()`方法读取Excel文件，并使用`utils.sheet_to_json()`方法将工作表转换为JSON格式的数据。然后，我们遍历数据，计算年龄的总和。这是`xlsx-js-style`插件无法提供的功能。综上所述，如果你只使用`xlsx-js-style`插件来导出文件，你将无法读取和处理Excel文件的数据，并且缺少其他Excel文件处理功能。因此，根据你的需求，你可能需要同时使用`xlsx`库和`xlsx-js-style`插件来实现更全面的Excel文件处理。

六、附录：（xlsx插件的部分方法和属性）

        这些属性可以用于读取和设置单元格的值、数据类型、公式、样式等信息。通过这些属性，你可以对单元格进行各种操作，如获取单元格的值、设置单元格的样式、读取单元格的公式等。