ExcelJS 下拉选择 dropdown、加密(encryption)文件、导出文件

这个昵称也不能用吗？

已于 2024-01-18 11:41:53 修改

阅读量1.4k

点赞数 7

文章标签： linux 前端

于 2024-01-10 17:59:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37766810/article/details/135509785

版权

本文介绍了如何使用ExcelJS在Excel中设置列的下拉选择，提供了三种方法进行数据验证，并详细讲解了两种导出表格的方式，包括基本的Buffer导出和使用XlsxPopulate库的加密导出技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用 ExcelJS 给某一列设置下拉选择的 3个方法

  // 下载模板 (导出Excel)
  const downloadTemplate = (tableData) => {
    // 生成表头data
    const showData = ['packageName', ...getShowData()];//string数组
    const columnsData = showData.map((key) => {
      const header = formatMessage({ id: `create_order.${key}` });
      return {
        header,
        key,
        width: 20,
      };
    });

    // 创建工作簿
    const workbook = new ExcelJS.Workbook();
    // 添加工作表
    const worksheet = workbook.addWorksheet('sheet', {});
    // 设置表头
    worksheet.columns = columnsData;
    // 添加数据
    worksheet.addRows(tableData);//数组['packageName','xiaoming','xxx',10,]

    //  某一列设置为下拉选择
    // 方法-1
    worksheet.dataValidations.add('A2:A9999', {
      type: 'list',
      allowBlank: false,
      formulae: ['"male,female,other"'],
      showErrorMessage: true,
      errorStyle: 'error',
      error: 'The value Valid',
    });

    // 方法-2
    for (let i = 2; i <= 9999; i += 1) {
      worksheet.getCell(`A${i}`).dataValidation = {
        type: 'list',
        allowBlank: false,
        formulae: ['"One,Two,Three,Four"'],
      };
    }

    // 方法-3
    // 必须是 已经填充数据的情况下。若数据只有3行，那么就只有前3个可以被设置 dataValidation 。
    worksheet.getColumn('A').eachCell({ includeEmpty: true }, (cell) => {
      // eslint-disable-next-line no-param-reassign
      cell.dataValidation = { type: 'list', allowBlank: false, formulae: ['"One,Two,Three,Four"'] };
    });
   //导出
   exportFun(worksheet)
  };

2、导出表格的 2种方式

导出方式1

 // 导出表格
 exportFun(){
    workbook.xlsx.writeBuffer().then((buffer) => {
      const file = new Blob([buffer], {
        type: 'application/octet-stream',
      });
      //导出方式1  需要额外下载一个包 FileSaver
      FileSaver.saveAs(
        file,
        `fileName.xlsx`,
      );
    //导出方式2 使用 js对象 Blob+url点击下载
     exportByUrl(file, 'fileName.xlsx', '1111');
    });
}

导出方式2

const exportByUrl = (file, saveName, pw) => {
    if (typeof file === 'object' && file instanceof Blob) {
      // 给blob对象生成临时URL
      const url = URL.createObjectURL(res);
      const aLink = document.createElement('a');
      aLink.href = url;
      // 指定保存文件名
      aLink.download = saveName || 'defaultName.xlsx';
      // 触发点击
      document.body.appendChild(aLink);
      aLink.click();
      aLink.remove();
      setLoading(false);
      Modal.success({
        title: formatMessage({ id: 'export.tip' }),
        content: (
          <div>
            <span>{formatMessage({ id: 'export.success.password.tip' }, { pw })}</span>
            <Button type="link" size="small" onClick={() => handleCopy(pw)}>
              {formatMessage({ id: 'export.pw.copy' })}
            </Button>
          </div>
        ),
        okText: formatMessage({ id: 'export.confirm' }),
      });
    }
  };

3、加密的2个方式

加密方式1 需要一个新的库 github readme 替换 Exceljs。但是使用方式完全兼容 Exceljs

 workbook.xlsx.writeBuffer({
 password: '1111',   // 加密方式1 
}) .then(()=>{
      //...导出步骤
   })

加密方式2 需要新库 XlsxPopulate 这种方式可能会导致证件号码之类的string数据变为科学计数法。
解决这个科学计数法的问题：可以在证件号码 '1111111' 后边加个 \t ,即可解决 1111111\t

    const blobWb = new Blob([workbook], { type: 'application/octet-stream' });
    XlsxPopulate.fromDataAsync(blobWb).then(function (wb) {
      wb.outputAsync({ type: 'blob', password: '1111' }).then((res) => {
        setVisible(false);
        exportByUrl(res, saveName, pw);
      });
    });