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 to see the worksheet contents in smaller or larger views. 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' 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 select data to remain 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' Worksheet.freezePanes(number, number, number, number) method. The Worksheet.freezePanes(number, number, number, number) method takes the following parameters:
- Row, the row index of the cell that the freeze will start from.
- Column, the column index of the cell that the freeze will start from.
- 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 the 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, split panes. Microsoft Excel offers a very handy feature that allows you to view more than one copy of your worksheet, and for you to be able to scroll through each pane of your worksheet independently: split panes.
The panes work simultaneously. If you make a change in one, the change simultaneously appears in the other. Aspose.Cells provides the split panes feature for the users.
Applying and Removing Split Panes
Splitting Panes
Aspose.Cells provides a class, Workbook 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' Worksheet.split(). To remove the split panes, use the Worksheet.removeSplit() method.
In the example, we use a simple template file that is loaded, then the set split panes feature is applied on 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 (converted from setActiveCell -> activeCell)
sheet.activeCell = "A20";
// Split the worksheet window
sheet.split();
// Save the excel file (SaveFormat.Xls -> SaveFormat.Excel97To2003)
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";
// Split the worksheet window - 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>