Angular中用XLSX库从模板生成Excel并转Base64求助

核心实现步骤 #

修改完工作表单元格后，需要通过XLSX.write将工作簿转换为二进制数据，再将该数据编码为Base64格式，具体实现如下：

完整修改代码 #

const byteArray = new Uint8Array(
  atob(files[0].base64Content)
        .split('')
        .map((char) => char.charCodeAt(0))
);

// 注意：原文件为Excel(.xlsx)时，MIME类型需改为对应格式，而非text/csv
const file = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const excelFile = new File([file], files[0].fileName, {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});

let fileReader = new FileReader();
fileReader.readAsArrayBuffer(excelFile);
fileReader.onload = (e) => {
    var arrayBuffer: any = fileReader.result;
    var data = new Uint8Array(arrayBuffer);
    var arr = new Array();
    for (var i = 0; i != data.length; ++i)
        arr[i] = String.fromCharCode(data[i]);

    var bstr = arr.join('');
    var workbook = XLSX.read(bstr, { type: 'binary' });
    var worksheet = workbook.Sheets['Worksheet1'];

    // 规范修改单元格：明确指定类型和值，避免格式异常
    worksheet['BP3'] = { t: 's', v: 'x' };

    // ------------------ 新增：将修改后的工作簿转为Base64 ------------------
    // 将工作簿写入为二进制字符串
    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
    
    // 二进制字符串转ArrayBuffer工具函数
    function s2ab(s: string) {
        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 arrayBufferOutput = s2ab(wbout);
    
    // ArrayBuffer转Base64
    const blob = new Blob([arrayBufferOutput], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const base64Reader = new FileReader();
    base64Reader.readAsDataURL(blob);
    base64Reader.onloadend = () => {
        // 截取dataURL中的纯Base64部分
        const base64Result = base64Reader.result?.toString().split(',')[1];
        console.log('修改后的Base64内容:', base64Result);
        
        // 此处可将base64Result用于保存、后端传输等操作
    };
};

关键细节说明 #

1. 单元格修改规范：直接赋值字符串可能导致格式异常，建议使用XLSX标准单元格对象格式，t: 's'表示字符串类型，v为单元格值。
2. 工作簿转二进制：XLSX.write指定type: 'binary'，生成后续转Base64所需的二进制字符串。
3. Base64转换：通过FileReader.readAsDataURL将Blob转为带前缀的data URL，截取逗号后内容即为纯Base64编码。

可选优化：简化初始解码步骤 #

原代码中从Base64到Blob再到File的步骤可简化，直接解码为二进制字符串：

// 简化版初始解码
const bstr = atob(files[0].base64Content);
const workbook = XLSX.read(bstr, { type: 'binary' });
// 后续修改单元格、转Base64步骤与上述一致

内容的提问来源于stack exchange，提问作者manatale