在制作流程图、关系图或数据标注时，向 Excel 工作表中插入线条（Lines）是常见需求。Spire.XLS for JavaScript 提供丰富的线条 API，支持创建多种线型（直线、曲线、肘形线等）及带箭头样式的连接器。所有操作均基于 WebAssembly 在浏览器端直接完成，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
插入不同类型的线条
sheet.Lines.AddLine() 方法可以在指定位置插入线条形状。通过 LineShapeType 枚举可以创建多种线型：直线（Line）、曲线（CurveLine）、肘形线（ElbowLine）和倒置线（LineInv）。线条的外观可以通过 DashStyle（虚线样式）、Color（颜色）和 Weight（粗细）等属性自定义。
具体操作步骤如下：
- 创建一个
Workbook对象并获取第一个工作表。 - 调用
Worksheet.Lines.AddLine()方法，传入位置参数和LineShapeType指定线型。 - 通过
DashStyle、Color、Weight和EndArrowHeadStyle属性自定义线条外观。 - 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中为 Excel 插入四种不同类型的线条：
function App() {
const addLineShapes = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将中文字体载入 VFS，用于文本度量与列宽自适应
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 创建一个新的工作簿并获取第一个工作表
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
// 添加直线 - 实线、CadetBlue 色、粗 2、带箭头
let line1 = sheet.Lines.AddLine({ row: 10, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.Line });
line1.DashStyle = xlsModule.ShapeDashLineStyleType.Solid;
line1.Color = xlsModule.Color.get_CadetBlue();
line1.Weight = 2;
line1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
// 添加曲线 - 点线、OrangeRed 色、粗 2
let line2 = sheet.Lines.AddLine({ row: 12, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.CurveLine });
line2.DashStyle = xlsModule.ShapeDashLineStyleType.Dotted;
line2.Color = xlsModule.Color.get_OrangeRed();
line2.Weight = 2;
// 添加肘形线 - DashDotDot 虚线、Purple 色、粗 2
let line3 = sheet.Lines.AddLine({ row: 14, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.ElbowLine });
line3.DashStyle = xlsModule.ShapeDashLineStyleType.DashDotDot;
line3.Color = xlsModule.Color.get_Purple();
line3.Weight = 2;
// 添加倒置线 - Dashed 虚线、Green 色、粗 2
let line4 = sheet.Lines.AddLine({ row: 16, column: 2, width: 200, height: 1, lineShapeType: xlsModule.LineShapeType.LineInv });
line4.DashStyle = xlsModule.ShapeDashLineStyleType.Dashed;
line4.Color = xlsModule.Color.get_Green();
line4.Weight = 2;
// 保存文档
const outputFileName = 'AddLineShapes.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
// 释放资源
workbook.Dispose();
// 从 VFS 读取转换后的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Add Line Shapes</h1>
<button onClick={addLineShapes}>Start</button>
</div>
);
}
export default App;
运行代码后，得到插入不同类型的线条的效果：
插入带箭头的线条
sheet.TypedLines.AddLine() 方法用于插入带箭头样式的线条。与 Lines.AddLine() 不同，TypedLines 支持通过像素坐标或行列坐标精确定位线条，并支持在两端设置不同样式的箭头头（开始端 BeginArrowHeadStyle 和结束端 EndArrowHeadStyle）。
具体操作步骤如下：
- 创建一个
Workbook对象并获取第一个工作表。 - 调用
Worksheet.TypedLines.AddLine()方法创建线条。 - 通过
Top、Left、Width、Height属性设置线条位置（基于像素）。 - 通过
BeginArrowHeadStyle和EndArrowHeadStyle设置两端的箭头样式。 - 通过
LineShapeType指定线型（直线、肘形线、曲线等）。 - 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中为 Excel 插入六种不同类型的箭头线：
function App() {
const addArrowLines = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将中文字体载入 VFS，用于文本度量与列宽自适应
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 创建一个新的工作簿并获取第一个工作表
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
// 添加双箭头线 - 实线蓝色
let line = sheet.TypedLines.AddLine();
line.Top = 10;
line.Left = 20;
line.Width = 100;
line.Height = 0;
line.Color = xlsModule.Color.get_Blue();
line.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
line.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
// 添加单箭头线 - 实线红色
let line_1 = sheet.TypedLines.AddLine();
line_1.Top = 50;
line_1.Left = 30;
line_1.Width = 100;
line_1.Height = 100;
line_1.Color = xlsModule.Color.get_Red();
line_1.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineNoArrow;
line_1.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
// 添加肘形箭头连接线
let line3 = sheet.TypedLines.AddLine();
line3.LineShapeType = xlsModule.LineShapeType.ElbowLine;
line3.Width = 30;
line3.Height = 50;
line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
line3.Top = 100;
line3.Left = 50;
// 添加肘形双箭头连接线
let line2 = sheet.TypedLines.AddLine();
line2.LineShapeType = xlsModule.LineShapeType.ElbowLine;
line2.Width = 50;
line2.Height = 50;
line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrow;
line2.Left = 120;
line2.Top = 100;
// 添加弧形箭头连接线
line3 = sheet.TypedLines.AddLine();
line3.LineShapeType = xlsModule.LineShapeType.CurveLine;
line3.Width = 30;
line3.Height = 50;
line3.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
line3.Top = 100;
line3.Left = 200;
// 添加弧形双箭头连接线
line2 = sheet.TypedLines.AddLine();
line2.LineShapeType = xlsModule.LineShapeType.CurveLine;
line2.Width = 30;
line2.Height = 50;
line2.EndArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
line2.BeginArrowHeadStyle = xlsModule.ShapeArrowStyleType.LineArrowOpen;
line2.Left = 250;
line2.Top = 100;
// 保存文档
const outputFileName = 'AddArrowLines.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
// 释放资源
workbook.Dispose();
// 从 VFS 读取转换后的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Add Arrow Lines</h1>
<button onClick={addArrowLines}>Start</button>
</div>
);
}
export default App;
运行代码后，得到插入带箭头的线条的效果：
常见问题
如何获取工作表中已存在的线条并进行修改？
原因：已导入含线条的 Excel 文件，但不知道如何读取或修改已有线条。
解决：通过 sheet.Shapes 集合遍历获取线条形状对象，再通过 ILineShape 接口修改其属性。例如 sheet.Shapes.get(0) 获取第一个形状，判断其是否为线条类型后可修改颜色、虚线样式等。
如何删除 Excel 工作表中的线条？
原因：需要移除已创建或导入的多余线条。
解决：通过 sheet.Shapes.Remove(index) 从形状集合中删除指定索引的线条对象，或循环遍历 Shapes 集合，按名称或类型条件逐个删除。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
