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);
});
});