Ocultar y mostrar filas y columnas con JavaScript vía C++
Contents
[
Hide
]
A veces, tiene sentido ocultar ciertas filas o columnas en una hoja de cálculo y mostrarlas más tarde. Microsoft Excel proporciona esta característica y también lo hace Aspose.Cells.
Controlar la Visibilidad de Filas y Columnas
Script Aspose.Cells for Java vía C++ proporciona una clase, Workbook, que representa un archivo de Microsoft Excel. La clase Workbook contiene un WorksheetCollection que permite a los desarrolladores acceder a cada hoja de cálculo en el archivo Excel. Una hoja de cálculo está representada por la clase Worksheet. La clase Worksheet proporciona una colección Cells que representa todas las celdas en la hoja. La colección Cells ofrece varios métodos para gestionar filas o columnas en una hoja de cálculo. Algunas de estas técnicas se analizan a continuación.
Ocultar Filas y Columnas
Los desarrolladores pueden ocultar una fila o columna llamando a los métodos hideRow(number) y hideColumn(number) de la colección Cells respectivamente. Ambos métodos toman el índice de fila y columna como parámetro para ocultar la fila o columna específica.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Hide Row and Column 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 with Uint8Array
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const worksheet = workbook.worksheets.get(0);
// Hiding the 3rd row of the worksheet
worksheet.cells.hideRow(2);
// Hiding the 2nd column of the worksheet
worksheet.cells.hideColumn(1);
// 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.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Row and column hidden successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
También es posible ocultar una fila o columna estableciendo la altura de la fila o el ancho de la columna en 0, respectivamente.
Mostrar Filas y Columnas
Los desarrolladores pueden mostrar cualquier fila o columna oculta llamando a los métodos unhideRow(number, number) y unhideColumn(number, number) de la colección Cells respectivamente. Ambos métodos requieren dos parámetros:
- Índice de fila o columna - el índice de una fila o columna que se utiliza para mostrar la fila o columna específica.
- Altura de fila o ancho de columna - la altura de fila o el ancho de columna asignados a la fila o columna después de desocultar.
<!DOCTYPE html>
<html>
<head>
<title>Unhide Rows and Columns Example</title>
</head>
<body>
<h1>Unhide Rows and Columns 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 with file buffer
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const worksheet = workbook.worksheets.get(0);
// Unhiding the 3rd row and setting its height to 13.5
worksheet.cells.unhideRow(2, 13.5);
// Unhiding the 2nd column and setting its width to 8.5
worksheet.cells.unhideColumn(1, 8.5);
// 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 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>
Al hacer visible una columna oculta, si necesita restaurarla a un ancho previamente asignado o a su ancho original, por favor desoculte la columna con un ancho negativo. Por ejemplo: worksheet.cells.unhideColumn(5, -1)
Ocultar Múltiples Filas y Columnas
Los desarrolladores pueden ocultar varias filas o columnas a la vez llamando a los métodos hideRows(number, number) y hideColumns(number, number) de la colección Cells respectivamente. Ambos métodos toman el índice de fila o columna inicial y el número de filas o columnas que deben ocultarse como parámetros.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Hide Rows and Columns</title>
</head>
<body>
<h1>Hide Rows and Columns 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();
// Instantiating a Workbook object from the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the first worksheet in the Excel file
const worksheet = workbook.worksheets.get(0);
// Hiding 3, 4, and 5 rows in the worksheet (rows are zero-based index)
worksheet.cells.hideRows(2, 3);
// Hiding 2 and 3 columns in the worksheet (columns are zero-based index)
worksheet.cells.hideColumns(1, 2);
// Saving the modified Excel file
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';
resultDiv.innerHTML = '<p style="color: green;">Rows and columns hidden successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
También es posible usar los métodos unhideRows(number, number, number) y unhideColumns(number, number, number) de la clase Cells para hacer que varias filas y columnas sean visibles.