Trabajar con HTML, imágenes y tablas en documentos de Word
En esta unidad, aprenderá a trabajar con HTML, imágenes y tablas en documentos de Microsoft Word mediante la API de JavaScript de Office.
Trabajar con HTML en documentos de Word
A muchos desarrolladores les resultará más fácil interactuar con un documento de Word como HTML en lugar de usar Open Office XML (OOXML). Open Office XML tiende a ser críptico y difícil de descifrar para los desarrolladores.
Office.js permite a los desarrolladores escribir o leer contenido en un documento de Word como HTML conocido. El cuerpo del documento, los párrafos y los rangos se pueden manipular como HTML mediante los métodos getHtml() y insertHtml() en la API de JavaScript de Word.
El código siguiente escribe un bloque de HTML al final de un párrafo. Este mismo código también se puede usar para el cuerpo del documento y un intervalo de contenido:
paragraph.insertHtml('<p style="font-family: verdana;">Inserted HTML.</p><p>Another paragraph</p>', "End");
Para recuperar el contenido de un párrafo como HTML, use el método getHtml() como se muestra en el código siguiente:
const html = paragraph.getHtml();
Trabajar con imágenes en los documentos de Word
Las imágenes pueden ser difíciles de usar en JavaScript, pero Office.js permite manipular las imágenes como cadenas codificadas en base64. Las imágenes se pueden insertar en el cuerpo, los párrafos o rangos de un documento. Cada uno de estos objetos tiene una colección inlinePictures en la que los desarrolladores pueden escribir.
Office.js le permite manipular la forma en que se muestran las imágenes en el documento a través de propiedades como lockAspectRatio, height y width entre otras.
El código siguiente devuelve una colección de todas las imágenes insertadas en el cuerpo del documento:
const images = body.inlinePictures;
Para insertar una imagen en el cuerpo del documento, use el método insertInlinePictureFromBase64(), pasando la representación de cadena base64 de la imagen y si la imagen debe agregarse al Start o End de la colección:
const base64Image = "..";
context.document.body.insertInlinePictureFromBase64(base64Image, "End");
También puede obtener la cadena codificada en base64 de una imagen en un documento mediante el getBase64ImageSrc() como se muestra en el código siguiente:
const someInlinePicture = body.inlinePictures[0];
const base64 = someInlinePicture.getBase64ImageSrc();
Por último, puede bloquear la relación de aspecto de una imagen y establecer las dimensiones de la imagen mediante las propiedades proporcionadas, como width:
someInlinePicture.lockAspectRatio = true;
someInlinePicture.width = 400;
Trabajar con tablas en los documentos de Word
Office.js permite a los desarrolladores insertar una tabla relativa a los párrafos, intervalos y el cuerpo de un documento.
El método insertTable() especifica las dimensiones de la tabla y dónde insertarla. Los datos se agregan a la tabla pasando una matriz bidimensional de valores al método insertTable().
La propiedad tables permite el acceso y la manipulación de las tablas en JavaScript en los objetos body y range.
Importante
Aunque una tabla se puede insertar en el documento en relación con un párrafo, no existe dentro del párrafo. Esto difiere de las imágenes insertadas descritas en la sección anterior que se agregan a los párrafos.
En el código siguiente se muestra cómo obtener una referencia a todas las tablas del cuerpo de un documento.
const originalRange = context.document.body.tables;
Nota:
Aunque el código anterior usa la propiedad body en un documento, la colección tables también existe en intervalos.
Para agregar una tabla con tres columnas y tres filas de datos, primero cree una matriz bidimensional que contenga el contenido e inclúyala como uno de los argumentos del método insertTable().
const tableData = [
["Name", "ID", "Birth City"],
["Bob", "434", "Chicago"],
["Sue", "719", "Havana"],
];
paragraph.insertTable(3, 3, "After", tableData);
El objeto tabla contiene propiedades para recuperar el número de filas de una tabla utilizando la propiedad rowCount y el contenido de la tabla utilizando la propiedad values:
const rows = table.rowCount;
const array2D = table.values;
Resumen
En esta unidad, aprendió a trabajar con HTML, imágenes y tablas en documentos de Microsoft Word mediante la API de JavaScript de Office.