Gestión de imágenes con JavaScript a través de C++
Contents
[
Hide
]
Aspose.Cells permite a los desarrolladores agregar imágenes a las hojas de cálculo en tiempo de ejecución. Además, la posición de estas imágenes se puede controlar en tiempo de ejecución, lo cual se discute con más detalle en las siguientes secciones.
Este artículo explica cómo agregar imágenes y cómo insertar una imagen que muestra el contenido de ciertas celdas.
Añadir imágenes
Agregar imágenes a una hoja de cálculo es muy fácil. Solo toma unas pocas líneas de código:
Simplemente llama al método Add de la colección Pictures (encapsulado en el objeto Worksheet). El método Add toma los siguientes parámetros:
- Índice de fila superior izquierda, el índice de la fila superior izquierda.
- Índice de columna superior izquierda, el índice de la columna superior izquierda.
- Nombre del archivo de imagen, el nombre del archivo de imagen, completo con la ruta.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Add Picture to Workbook Example</h1>
<p>Select an optional Excel file to update (or leave empty to create a new workbook), and select an image file to insert as a picture.</p>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<input type="file" id="imageInput" accept="image/*" />
<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');
const imageInput = document.getElementById('imageInput');
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
if (!imageInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an image file to insert.</p>';
return;
}
// Load existing workbook if provided, otherwise create a new one
let workbook;
if (fileInput.files.length) {
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Read image file bytes
const imageFile = imageInput.files[0];
const imageArrayBuffer = await imageFile.arrayBuffer();
const imageBytes = new Uint8Array(imageArrayBuffer);
// Adding a picture at the location of a cell whose row and column indices are 5 (F6)
worksheet.pictures.add(5, 5, imageBytes);
// Saving the Excel file (Excel 97-2003 .xls format)
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';
resultDiv.innerHTML = '<p style="color: green;">Picture added successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Posicionamiento de imágenes
Hay dos formas posibles de controlar el posicionamiento de las imágenes usando Aspose.Cells:
- Posicionamiento proporcional: define una posición proporcional a la altura y ancho de la fila.
- Posicionamiento absoluto: define la posición exacta en la página donde se insertará la imagen, por ejemplo, 40 píxeles a la izquierda y 20 píxeles por debajo del borde de la celda.
Posicionamiento proporcional
Los desarrolladores pueden posicionar las imágenes proporcionalmente a la altura de la fila y el ancho de la columna usando las propiedades upperDeltaX y upperDeltaY del objeto Picture. Se puede obtener un objeto Picture del conjunto Pictures pasando su índice de imagen. Este ejemplo coloca una imagen en la celda F6.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells - Add Picture to New Workbook</h1>
<p>Select an image to insert into a new Excel workbook. The picture will be placed at cell F6 (row 5, column 5).</p>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<br/><br/>
<label for="imageInput">Select image to insert:</label>
<input type="file" id="imageInput" accept="image/*" />
<br/><br/>
<button id="runExample">Create Workbook and Add Picture</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 imageInput = document.getElementById('imageInput');
if (!imageInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an image file to insert.</p>';
return;
}
// Instantiate a new Workbook
const workbook = new Workbook();
// Add a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtain the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Read the selected image file as bytes
const imageFile = imageInput.files[0];
const arrayBuffer = await imageFile.arrayBuffer();
const imageBytes = new Uint8Array(arrayBuffer);
// Adding a picture at the location of a cell whose row and column indices are 5 (F6)
const pictureIndex = worksheet.pictures.add(5, 5, imageBytes);
// Accessing the newly added picture
const picture = worksheet.pictures.get(pictureIndex);
// Positioning the picture proportional to row height and column width (property assignments)
picture.upperDeltaX = 200;
picture.upperDeltaY = 200;
// Saving the Excel file (Excel 97-2003 format)
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and picture added successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Posicionamiento absoluto
Los desarrolladores también pueden posicionar las imágenes absolutamente usando las propiedades left y top del objeto Picture. Este ejemplo coloca una imagen en la celda F6, a 60 píxeles desde la izquierda y 10 píxeles desde la parte superior de la celda.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Add Picture</title>
</head>
<body>
<h1>Add Picture to Workbook Example</h1>
<p>Select an image file to insert into a new Excel workbook:</p>
<input type="file" id="fileInput" accept="image/*" />
<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');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an image file.</p>';
return;
}
// Read image file as bytes
const imageFile = fileInput.files[0];
const arrayBuffer = await imageFile.arrayBuffer();
const imageBytes = new Uint8Array(arrayBuffer);
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding a picture at the location of a cell whose row and column indices are 5 in the worksheet ("F6")
const pictureIndex = worksheet.pictures.add(5, 5, imageBytes);
// Accessing the newly added picture
const picture = worksheet.pictures.get(pictureIndex);
// Absolute positioning of the picture in unit of pixels
picture.left = 60;
picture.top = 10;
// Saving the 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 = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
resultDiv.innerHTML = '<p style="color: green;">Picture added successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Insertar una imagen basada en referencia de celda
Aspose.Cells te permite mostrar el contenido de una celda de la hoja de cálculo en una forma de imagen. Puedes vincular la imagen a la celda que contiene los datos que deseas mostrar. Dado que la celda o el rango de celdas está vinculado al objeto gráfico, los cambios que realices en los datos de esa celda o rango de celdas aparecerán automáticamente en el objeto gráfico.
Agrega una imagen a la hoja de cálculo llamando al método ShapeCollection.addPicture(number, number, number, number, Uint8Array) del conjunto ShapeCollection (encapsulado en el objeto Worksheet). Especifica el rango de celdas usando el atributo formula del objeto Picture.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Aspose.Cells 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 () => {
// This example creates a new workbook, modifies cells and pictures, and saves it.
const workbook = new Workbook();
// Get the first worksheet's cells collection
const worksheet = workbook.worksheets.get(0);
const cells = worksheet.cells;
// Add string values to the cells
cells.get("A1").value = "A1";
cells.get("C10").value = "C10";
// Get pictures collection and add a blank picture to the D1 cell
const picts = worksheet.pictures;
const picIndex = picts.add(0, 3, 10, 6, null);
const pic = picts.get(picIndex);
// Specify the formula that refers to the source range of cells
pic.formula = "A1:C10";
// Update the shapes selected value in the worksheet
worksheet.shapes.updateSelectedValue();
// Save the 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;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>