Vue前端导出Excel文件的详细实现方案

实现Vue前端导出Excel文件主要有两种方案：一种是使用JavaScript库，如：SheetJS、ExcelJS，另一种是使用原生JavaScript实现。

使用SheetJS库实现

SheetJS库提供了一系列API，使得我们可以方便地在前端实现Excel导入导出功能。以下是具体步骤：

步骤一：安装SheetJS

npm install xlsx

步骤二：数据转换为Excel

在Vue组件中定义一个方法，将数据转换为Excel文件。

import XLSX from 'xlsx';

export default{
    methods:{
        exportExcel(){
            // 数据源
            let dataList = [
                {
                    id: 1,
                    name: '张三',
                    age: 20
                },
                {
                    id: 2,
                    name: '李四',
                    age: 21
                }
            ];

            // 表头
            let header = ['id', 'name', 'age'];

            // 列宽
            let widths = [10, 20, 10];

            // 创建工作簿
            const workbook = XLSX.utils.book_new();

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

            // 设置列宽
            worksheet['!cols'] = [];
            widths.forEach((width, index) => {
                worksheet['!cols'][index] = {
                    width: width
                };
            });

            // 设置表头
            worksheet['!cols'] = [];
            header.forEach((item, index) =>{
                worksheet[XLSX.utils.encode_col(index) + "1"] = {
                    v: item,
                    t: "s"
                };
                worksheet['!cols'][index] = {
                    width: widths[index]
                };
            });

            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet);

            // 将工作簿转换为二进制
            const excel = XLSX.write(workbook, {
                bookType: 'xlsx',
                type: 'binary'
            });

            // 下载Excel文件
            const fileName = 'demo.xlsx';
            saveAs(new Blob([s2ab(excel)], {
                type: 'application/octet-stream'
            }), fileName);
        }
    }
}

// ArrayBuffer转字符串
function ab2str(buf) {
    return String.fromCharCode.apply(null, new Uint8Array(buf));
}

// 字符串转ArrayBuffer
function s2ab(str) {
    const buf = new ArrayBuffer(str.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < str.length; i++) {
        view[i] = str.charCodeAt(i) & 0xFF;
    }
    return buf;
}

在该示例中，我们通过传入数据源、表头信息、列宽等参数，将数据源转换为Excel文件，并通过saveAs方法将转换后的数据下载到本地。

步骤三：下载SheetJS工具包

SheetJS的工具包提供了一系列的文件操作功能，如读取Excel文件内容、将JSON数据转换为Excel文件等功能。我们需要将dist目录下的文件下载到本地，将其作为前端项目的依赖文件之一。

使用原生JavaScript实现

export default{
    methods:{
        exportExcel(){
            // 数据源
            let dataList = [
                {
                    id: 1,
                    name: '张三',
                    age: 20
                },
                {
                    id: 2,
                    name: '李四',
                    age: 21
                }
            ];

            // 表头
            let header = ['id', 'name', 'age'];

            // 列宽
            let widths = [10, 20, 10];

            const headerRow = header.map((v, i) => Object.assign({}, {v: v, position: String.fromCharCode(65+i) + 1 }))
                .reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.v}}), {});

            const dataRows = dataList.map((v, i) => header.map((k, j) => Object.assign({}, {v: v[k], position: String.fromCharCode(65+j) + (i+2) })))
                .reduce((prev, next) => prev.concat(next))
                .reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.v}}), {});

            // 组装数据表
            const output = Object.assign({}, headerRow, dataRows);
            const workbook = {
                SheetNames: ['mySheet'],
                Sheets: {
                    'mySheet': output
                }
            };

            // 设置列宽
            worksheet["!cols"] = [];
            widths.forEach((width, index) => {
                worksheet["!cols"][index] = {
                    width: width
                };
            });

            // 将表格转换为字符串
            const excel = XLSX.write(workbook, {
                bookType: 'xlsx',
                type: 'binary'
            });

            // 下载Excel文件
            const fileName = 'demo.xlsx';
            saveAs(new Blob([s2ab(excel)], {
                type: 'application/octet-stream'
            }), fileName);
        }
    }
}

// ArrayBuffer转字符串
function ab2str(buf) {
    return String.fromCharCode.apply(null, new Uint8Array(buf));
}

// 字符串转ArrayBuffer
function s2ab(str) {
    const buf = new ArrayBuffer(str.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < str.length; i++) {
        view[i] = str.charCodeAt(i) & 0xFF;
    }
    return buf;
}

在该示例中，我们也是通过传入数据源、表头信息、列宽等参数，将数据源转换为Excel文件，并通过saveAs方法将转换后的数据下载到本地。该示例与SheetJS库方法相似，但实现方式略有不同。

以上是两种Vue前端导出Excel文件的实现方案。我们可以选择根据需求选择合适的方法进行实现。