配置页面设置对于准备打印或导出为PDF的Excel文档至关重要。Spire.XLS for JavaScript 通过WebAssembly完全在浏览器中运行，使用虚拟文件系统（VFS）管理输入和输出文件——无需后端服务器。它通过 PageSetup 对象提供全面的页面设置功能，使您能够控制页边距、方向、纸张大小、打印区域、缩放比例和适应页面选项。
Spire.XLS中的 PageSetup 对象提供了丰富的属性，用于控制工作表的打印或显示方式。关键属性包括：
| 属性 |
描述 |
| TopMargin / BottomMargin / LeftMargin / RightMargin |
设置页面边距 |
| Orientation |
设置页面方向（纵向或横向） |
| PaperSize |
设置纸张大小（A4、Letter等） |
| PrintArea |
指定要打印的单元格区域 |
| Zoom |
设置工作表缩放百分比 |
| FitToPagesTall / FitToPagesWide |
将工作表缩放以适应指定的页数 |
本文涵盖六个核心功能：
有关安装和项目设置，请参阅React 项目中集成 Spire.XLS for JavaScript。以下示例假定Spire.XLS已安装且WebAssembly模块已初始化。
调整Excel页边距
页边距定义了打印工作表边缘周围的空白区域。操作步骤如下：
- 使用
new xlsModule.Workbook() 创建 Workbook 对象。
- 使用
workbook.Worksheets.get(index) 方法获取默认工作表。
- 通过
sheet.PageSetup 访问 PageSetup 对象。
- 使用
pageSetup.TopMargin、pageSetup.BottomMargin、pageSetup.LeftMargin 和 pageSetup.RightMargin 属性设置页边距。
- 使用
workbook.SaveToFile() 方法将工作簿保存为 Excel 文件。
以下是在React中调整页边距的完整代码示例：
function App() {
const adjustPageMargins = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建工作簿并加载已有文件
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 获取 PageSetup 对象
const pageSetup = sheet.PageSetup;
// 设置工作表的上、下、左、右、页眉、页脚页边距
pageSetup.TopMargin = 1;
pageSetup.BottomMargin = 1;
pageSetup.LeftMargin = 0.75;
pageSetup.RightMargin = 0.75;
// 保存工作簿
const outputFileName = 'AdjustMargins.xlsx';
workbook.SaveToFile(outputFileName);
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>Adjust Page Margins</h1>
<button onClick={adjustPageMargins}>
Generate
</button>
</div>
);
}
export default App;
使用Spire.XLS for JavaScript调整页边距
调整Excel页面方向
页面方向决定了工作表是以纵向（垂直）还是横向（水平）布局打印。横向布局尤其适用于包含多列的宽表格。操作步骤如下：
- 使用
new xlsModule.Workbook() 创建 Workbook 对象。
- 使用
workbook.Worksheets.get(index) 方法获取默认工作表。
- 通过
sheet.PageSetup 访问 PageSetup 对象。
- 使用
pageSetup.Orientation 属性设置页面方向。
- 使用
workbook.SaveToFile() 方法将工作簿保存为 Excel 文件。
以下是在React中将页面方向设置为横向的完整代码示例：
function App() {
const setPageOrientation = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建工作簿并加载已有文件
// 将示例文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 将页面方向设置为横向
sheet.PageSetup.Orientation = xlsModule.PageOrientationType.Landscape;
// 保存工作簿
const outputFileName = 'SetOrientation.xlsx';
workbook.SaveToFile(outputFileName);
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>Set Page Orientation</h1>
<button onClick={setPageOrientation}>
Generate
</button>
</div>
);
}
export default App;
使用Spire.XLS for JavaScript将页面方向设置为横向
调整Excel纸张大小
不同的打印机和地区使用不同的标准纸张大小。Spire.XLS for JavaScript通过 PaperSizeType 枚举支持多种纸张大小，包括A4、Letter、A3等。操作步骤如下：
- 使用
new xlsModule.Workbook() 创建 Workbook 对象。
- 使用
workbook.Worksheets.get(index) 方法获取默认工作表。
- 通过
sheet.PageSetup 访问 PageSetup 对象。
- 使用
pageSetup.PaperSize 属性设置纸张大小。
- 使用
workbook.SaveToFile() 方法将工作簿保存为 Excel 文件。
以下是在React中将纸张大小设置为A3的完整代码示例：
function App() {
const setPaperSize = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建工作簿并加载已有文件
// 将示例文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 获取 PageSetup 对象
const pageSetup = sheet.PageSetup;
// 将纸张大小设置为 A3
pageSetup.PaperSize = xlsModule.PaperSizeType.PaperA3;
// 保存工作簿
const outputFileName = 'SetPaperSize.xlsx';
workbook.SaveToFile(outputFileName);
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>Set Paper Size</h1>
<button onClick={setPaperSize}>
Generate
</button>
</div>
);
}
export default App;
使用Spire.XLS for JavaScript将纸张大小设置为A3
调整Excel打印区域
打印区域定义了工作表中将被打印的部分。操作步骤如下：
- 使用
new xlsModule.Workbook() 创建 Workbook 对象。
- 使用
workbook.Worksheets.get(index) 方法获取默认工作表。
- 使用
sheet.Range 属性填入示例数据。
- 通过
sheet.PageSetup 访问 PageSetup 对象。
- 使用
pageSetup.PrintArea 属性设置打印区域。
- 使用
workbook.SaveToFile() 方法将工作簿保存为 Excel 文件。
以下是在React中设置打印区域的完整代码示例：
function App() {
const setPrintArea = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建工作簿并加载已有文件
// 将示例文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 将打印区域设置为 A1:E3
sheet.PageSetup.PrintArea = "A1:E3";
// 保存工作簿
const outputFileName = 'SetPrintArea.xlsx';
workbook.SaveToFile(outputFileName);
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>Set Print Area</h1>
<button onClick={setPrintArea}>
Generate
</button>
</div>
);
}
export default App;
使用Spire.XLS for JavaScript设置打印区域
调整Excel缩放比例
缩放比例控制工作表在屏幕上显示的放大级别。取值范围为10到400，表示正常大小的百分比。操作步骤如下：
- 使用
new xlsModule.Workbook() 创建 Workbook 对象。
- 使用
workbook.Worksheets.get(index) 方法获取默认工作表。
- 使用
sheet.Zoom 属性设置缩放比例。
- 使用
workbook.SaveToFile() 方法将工作簿保存为 Excel 文件。
以下是在React中设置缩放比例的完整代码示例：
function App() {
const setZoomScale = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建工作簿并加载已有文件
// 将示例文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 将缩放比例设置为 85%
const pageSetup = sheet.PageSetup;
pageSetup.Zoom=85;
// 保存工作簿
const outputFileName = 'SetZoomScale.xlsx';
workbook.SaveToFile(outputFileName);
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>Set Zoom Scale</h1>
<button onClick={setZoomScale}>
Generate
</button>
</div>
);
}
export default App;
使用Spire.XLS for JavaScript将缩放比例设置为85%
将Excel表格调整为1页
当打印大型工作表时，内容可能会跨越多页，导致阅读困难。操作步骤如下：
- 使用
new xlsModule.Workbook() 创建 Workbook 对象。
- 使用
workbook.Worksheets.get(index) 方法获取默认工作表。
- 使用
sheet.Range 属性填入大量数据。
- 通过
sheet.PageSetup 访问 PageSetup 对象。
- 使用
pageSetup.FitToPagesTall 和 pageSetup.FitToPagesWide 属性设置页面缩放。
- 使用
workbook.SaveToFile() 方法将工作簿保存为 Excel 文件。
以下是在React中将工作表适配到一页的完整代码示例：
function App() {
const fitToPage = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建工作簿并加载已有文件
// 将示例文件加载到 VFS
await window.spire.FetchFileToVFS('Sample.xlsx', '', `${process.env.PUBLIC_URL}data/`);
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'Sample.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 将工作表内容缩放至一页
const pageSetup = sheet.PageSetup;
pageSetup.FitToPagesTall = 1;
pageSetup.FitToPagesWide = 1;
// 保存工作簿
const outputFileName = 'FitToPage.xlsx';
workbook.SaveToFile(outputFileName);
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>Fit Worksheet to 1 Page</h1>
<button onClick={fitToPage}>
Generate
</button>
</div>
);
}
export default App;
使用Spire.XLS for JavaScript将工作表缩放至一页
常见问题
如何设置打印时显示网格线或行号列标
原因：默认情况下，打印工作表时不显示网格线以及行号和列标，影响数据可读性。
解决方案：使用 PageSetup 对象的 IsPrintGridlines 和 IsPrintHeadings 属性：
pageSetup.IsPrintGridlines = true;
pageSetup.IsPrintHeadings = true;
如何获取当前页面的实际尺寸
原因：需要了解当前页面设置的纸张实际宽高，以便调整内容布局。
解决方案：通过 PageSetup 对象的 PageWidth 和 PageHeight 属性获取：
var pageWidth = pageSetup.PageWidth;
var pageHeight = pageSetup.PageHeight;
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
