Worksheet Views with JavaScript via C++
Page Break Preview
All worksheets can be viewed in two modes:
- Normal view.
- Page break preview.
Normal view is a worksheet’s default view. Page break preview is an editing view that displays a worksheet as it will print. Page break preview shows what data will go on each page so you can adjust the print area and page breaks. Using Aspose.Cells for JavaScript via C++, developers can enable normal view or page break preview modes.
Controlling View Modes
Aspose.Cells provides a Workbook class that represents a Microsoft Excel file. The Workbook class contains a workbook.worksheets collection that allows access to each worksheet in an Excel file.
A worksheet is represented by the Worksheet class. The Worksheet class provides a wide range of properties and methods for managing worksheets. To enable normal or page break preview modes, use the Worksheet class Worksheet.isPageBreakPreview() property. Worksheet.isPageBreakPreview() is a Boolean property, which means that it can only store a true or a false value.
Enabling Normal View
Set a worksheet to normal view by setting the Worksheet class Worksheet.isPageBreakPreview() property to false.
Enabling Page Break Preview
Set any worksheet to page break preview by setting the Worksheet class Worksheet.isPageBreakPreview() property to true. Doing so switches the worksheet from normal view to page break preview.
A complete example is given below that demonstrates how to use the Worksheet.isPageBreakPreview() property to enable page break preview mode for the first worksheet of an Excel file.
The book1.xls file is opened by creating an instance of the Workbook class. The view is switched to page break preview for the first worksheet by setting the Worksheet.isPageBreakPreview() property to true. The modified file is saved as output.xls.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Page Break Preview</title>
</head>
<body>
<h1>Page Break Preview Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object using the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const worksheet = workbook.worksheets.get(0);
// Displaying the worksheet in page break preview
worksheet.isPageBreakPreview = true;
// Saving the modified Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Zoom Factor
Using Microsoft Excel
Microsoft Excel provides a feature that lets users set a worksheet’s zoom or scaling factor. This feature helps users view the worksheet contents in smaller or larger sizes. Users can set the zoom factor to any value.
Aspose.Cells & Zoom Factor
Aspose.Cells allows developers to set the worksheet zoom factor.
Aspose.Cells provides a Workbook class that represents a Microsoft Excel file. The Workbook class contains a workbook.worksheets collection that allows access to each worksheet in an Excel file.
A worksheet is represented by the Worksheet class. The Worksheet class provides a wide range of properties and methods for managing worksheets. To set a worksheet’s zoom factor, use the Worksheet class’s Worksheet.zoom property. The zoom factor is set by assigning a numeric (integer) value to the Worksheet.zoom property.
A complete example is given below that demonstrates how to use the Worksheet.zoom property to set the zoom factor of the first worksheet of the Excel file.
The book1.xls file is opened by creating an instance of the Workbook class. The zoom factor of the first worksheet is set to 75 and the modified file is saved as output.xls.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells: Set Worksheet Zoom Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object by opening the Excel file from the uploaded file stream
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const worksheet = workbook.worksheets.get(0);
// Setting the zoom factor of the worksheet to 75
worksheet.zoom = 75;
// Saving the modified Excel file (Excel97-2003 format for .xls)
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Zoom set to 75 successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Freeze Panes
Using Microsoft Excel
Freeze panes is a feature provided by Microsoft Excel. Freezing panes allows you to keep selected data visible when scrolling in a worksheet.
Aspose.Cells & Freeze Panes
Aspose.Cells allows developers to apply freeze panes to worksheets at runtime.
Aspose.Cells provides a Workbook class that represents a Microsoft Excel file. The Workbook class contains a workbook.worksheets collection that allows access to each worksheet in an Excel file.
A worksheet is represented by the Worksheet class. The Worksheet class provides a wide range of properties and methods for managing worksheets. To configure freeze panes, call the Worksheet class’s Worksheet.freezePanes(number, number, number, number) method. The freezePanes method takes the following parameters:
- Row – the row index of the cell where the freeze will start.
- Column – the column index of the cell where the freeze will start.
- Frozen rows – the number of visible rows in the top pane.
- Frozen columns – the number of visible columns in the left pane.
The book1.xls file is opened by calling the Workbook class constructor while instantiating it, and a few rows and columns are frozen in the first worksheet. The modified file is saved as output.xls.
A complete example is given below that shows how to use the Worksheet.freezePanes(number, number, number, number) method to freeze rows and columns (starting from C4, represented by the 4th row and 3rd column, where rows and columns start from the 0 index) of the first worksheet of the Excel file.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Freeze Panes Example</title>
</head>
<body>
<h1>Freeze Panes Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object using the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const worksheet = workbook.worksheets.get(0);
// Applying freeze panes settings: topRows = 3, leftColumns = 2, top = 3, left = 2
worksheet.freezePanes(3, 2, 3, 2);
// Saving the modified Excel file in Excel97-2003 format (.xls)
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData], { type: "application/octet-stream" });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Freeze panes applied successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Split Panes
If you need to split the screen to get two different views in the same worksheet, use split panes. Microsoft Excel offers a very handy feature that allows you to view more than one copy of your worksheet and scroll each pane independently.
The panes work simultaneously. If you make a change in one, the change appears in the other. Aspose.Cells provides the split panes feature for users.
Applying and Removing Split Panes
Splitting Panes
Aspose.Cells provides a Workbook class that represents a Microsoft Excel file. The Workbook class provides a wide range of properties and methods for managing an Excel file. To implement split views, use the Worksheet class’s Worksheet.split() method. To remove the split panes, use the Worksheet.removeSplit() method.
In the example, we use a simple template file that is loaded, then the split panes feature is applied to a cell in the first worksheet. The updated file is saved.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Split Window Example</title>
</head>
<body>
<h1>Split Worksheet Window Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Worksheet, Cell, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiate a new workbook and open the uploaded file
const book = new Workbook(new Uint8Array(arrayBuffer));
// Access the first worksheet
const sheet = book.worksheets.get(0);
// Set the active cell
sheet.activeCell = "A20";
// Split the worksheet window
sheet.split();
// Save the Excel file
const outputData = book.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
resultDiv.innerHTML = '<p style="color: green;">Worksheet window split and active cell set successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
After running the above code, the generated file will have a split view.
Removing Panes
Remove split panes using the Worksheet.removeSplit() method.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Set Active Cell and Remove Split Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiate a new workbook from the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access the first worksheet in the workbook
const worksheet = workbook.worksheets.get(0);
// Set the active cell
worksheet.activeCell = "A20";
// Remove any existing split
worksheet.removeSplit();
// Save the modified workbook and provide a download link
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>