Renderizar diapositivas de presentación como imágenes SVG en JavaScript

De qué trata esta página

Exportar diapositivas de PowerPoint como imágenes SVG en JavaScript y controlar fuentes, texto, imágenes, IDs y eventos con Aspose.Slides.

Visión general

SVG es un formato de imagen escalable basado en XML que funciona bien para la publicación web, los visores de diapositivas, los flujos de trabajo de accesibilidad y el post-procesado automatizado. Aspose.Slides para Node.js a través de Java exporta cada diapositiva a un archivo SVG independiente y le permite controlar cómo se generan el texto, las fuentes, las imágenes y los elementos SVG.

Utilice SVGOptions cuando el SVG exportado deba ser compacto, predecible en diferentes navegadores o estar listo para su uso interactivo.

Exportar una diapositiva como SVG

Cree una Presentation, seleccione una diapositiva y escríbala en un flujo con Slide.writeAsSvg. El siguiente ejemplo exporta cada diapositiva de una presentación a un archivo SVG independiente.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const slideCount = presentation.getSlides().size();
    for (let slideIndex = 0; slideIndex < slideCount; slideIndex++) {
        const slide = presentation.getSlides().get_Item(slideIndex);
        const outputFileName = `slide-${slide.getSlideNumber()}.svg`;
        const svgStream = java.newInstanceSync("java.io.FileOutputStream", outputFileName);
        try {
            slide.writeAsSvg(svgStream);
        } finally {
            svgStream.close();
        }
    }
} finally {
    presentation.dispose();
}

El nombre de archivo utiliza Slide.getSlideNumber en lugar del índice del bucle. También puede exportar una forma individual con Shape.writeAsSvg cuando un visor de diapositivas o una página web necesita solo esa forma.

Configurar la salida SVG

SVGOptions controla la renderización SVG. Para los marcos de texto, SVGOptions.setUseFrameSize incluye el marco de texto en el área de renderizado, y SVGOptions.setUseFrameRotation determina si se aplica la rotación del marco. Establezca SVGOptions.setDisableFontLigatures en true cuando el texto deba renderizarse sin ligaduras.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    svgOptions.setDisableFontLigatures(true);
    svgOptions.setUseFrameSize(true);
    svgOptions.setUseFrameRotation(false);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-custom-options.svg"
    );
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Controlar el texto y las fuentes

Vectorizar todo el texto

Establezca SVGOptions.setVectorizeText en true para escribir todo el texto de la diapositiva como gráficos vectoriales. Esto elimina las dependencias de fuentes y hace que el resultado visual sea más coherente entre navegadores, pero el texto ya no será seleccionable ni buscable como texto SVG.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    svgOptions.setVectorizeText(true);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-vectorized-text.svg"
    );
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Elegir cómo se gestionan las fuentes externas

SVGOptions.setExternalFontsHandling utiliza un valor de SvgExternalFontsHandling para las fuentes que se cargan externamente. Elija AddLinksToFontFiles para referenciar archivos de fuentes separados, Embed para incluir los datos de la fuente en el SVG, o Vectorize para representar como gráficos solo el texto que utiliza fuentes externas. Verifique la licencia de las fuentes antes de incrustarlas.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const slide = presentation.getSlides().get_Item(0);

    const linkedFontsOptions = new slides.SVGOptions();
    linkedFontsOptions.setExternalFontsHandling(
        slides.SvgExternalFontsHandling.AddLinksToFontFiles
    );
    const linkedFontsStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-font-links.svg"
    );
    try {
        slide.writeAsSvg(linkedFontsStream, linkedFontsOptions);
    } finally {
        linkedFontsStream.close();
    }

    const embeddedFontsOptions = new slides.SVGOptions();
    embeddedFontsOptions.setExternalFontsHandling(
        slides.SvgExternalFontsHandling.Embed
    );
    const embeddedFontsStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-embedded-fonts.svg"
    );
    try {
        slide.writeAsSvg(embeddedFontsStream, embeddedFontsOptions);
    } finally {
        embeddedFontsStream.close();
    }

    const vectorizedExternalFontsOptions = new slides.SVGOptions();
    vectorizedExternalFontsOptions.setExternalFontsHandling(
        slides.SvgExternalFontsHandling.Vectorize
    );
    const vectorizedExternalFontsStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-vectorized-external-fonts.svg"
    );
    try {
        slide.writeAsSvg(vectorizedExternalFontsStream, vectorizedExternalFontsOptions);
    } finally {
        vectorizedExternalFontsStream.close();
    }
} finally {
    presentation.dispose();
}

Reducir el tamaño de imágenes incrustadas

Utilice SVGOptions.setPicturesCompression para reducir la resolución de las imágenes incrustadas, SVGOptions.setDeletePicturesCroppedAreas para omitir las áreas recortadas de la fuente, y SVGOptions.setJpegQuality para controlar la calidad de codificación JPEG. Estas configuraciones reducen el tamaño del archivo a costa de la fidelidad de la imagen o de los datos de imagen conservados.

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    svgOptions.setPicturesCompression(slides.PicturesCompression.Dpi150);
    svgOptions.setDeletePicturesCroppedAreas(true);
    svgOptions.setJpegQuality(80);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync("java.io.FileOutputStream", "compressed-slide.svg");
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Asignar IDs estables a formas y texto

Pase un controlador de formato a SVGOptions.setShapeFormattingController para establecer SvgShape.setId en cada forma SVG. Un controlador que también gestione los intervalos de texto puede establecer valores SvgTSpan.setId en los elementos tspan de texto.

El siguiente controlador utiliza Shape.getOfficeInteropShapeId, que es estable durante la vida útil de la forma, y un contador repetible para sus intervalos de texto. Esto hace que los IDs generados sean adecuados para el post-procesado de una presentación sin cambios.

const slides = require("aspose.slides.via.java");
const java = require("java");

class StableSvgIdController {
    constructor() {
        this.currentShapeId = "";
        this.textSpanIndex = 0;
    }

    formatShape(svgShape, shape) {
        this.currentShapeId = `shape-${shape.getOfficeInteropShapeId()}`;
        this.textSpanIndex = 0;
        svgShape.setId(this.currentShapeId);
    }

    formatText(svgTSpan, portion, textFrame) {
        const textSpanId = `${this.currentShapeId}-text-${this.textSpanIndex++}`;
        svgTSpan.setId(textSpanId);
    }

    createProxy() {
        const controller = this;
        const interfaceName = "com.aspose.slides.ISvgShapeAndTextFormattingController";
        const proxyMethods = {
            formatShape(svgShape, shape) {
                controller.formatShape(svgShape, shape);
            },
            formatText(svgTSpan, portion, textFrame) {
                controller.formatText(svgTSpan, portion, textFrame);
            }
        };
        return java.newProxy(interfaceName, proxyMethods);
    }
}

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    const stableSvgIdController = new StableSvgIdController();
    const controllerProxy = stableSvgIdController.createProxy();
    svgOptions.setShapeFormattingController(controllerProxy);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync(
        "java.io.FileOutputStream",
        "slide-with-stable-ids.svg"
    );
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

Agregar controladores de eventos SVG

En un controlador de formato, llame a SvgShape.setEventHandler con un valor SvgEvent para añadir un controlador de eventos JavaScript a una forma exportada. Asigne el controlador con SVGOptions.setShapeFormattingController y defina la función JavaScript en la página o documento SVG que aloje el resultado.

const slides = require("aspose.slides.via.java");
const java = require("java");

class SvgEventController {
    formatShape(svgShape, shape) {
        if (shape.getName() === "ActionButton") {
            svgShape.setId("action-button");
            svgShape.setEventHandler(
                slides.SvgEvent.OnClick,
                "handleShapeClick(event)"
            );
        }
    }

    createProxy() {
        const controller = this;
        const interfaceName = "com.aspose.slides.ISvgShapeFormattingController";
        const proxyMethods = {
            formatShape(svgShape, shape) {
                controller.formatShape(svgShape, shape);
            }
        };
        return java.newProxy(interfaceName, proxyMethods);
    }
}

const presentation = new slides.Presentation("presentation.pptx");
try {
    const svgOptions = new slides.SVGOptions();
    const svgEventController = new SvgEventController();
    const controllerProxy = svgEventController.createProxy();
    svgOptions.setShapeFormattingController(controllerProxy);

    const slide = presentation.getSlides().get_Item(0);
    const svgStream = java.newInstanceSync("java.io.FileOutputStream", "interactive-slide.svg");
    try {
        slide.writeAsSvg(svgStream, svgOptions);
    } finally {
        svgStream.close();
    }
} finally {
    presentation.dispose();
}

La página anfitriona puede definir la función JavaScript a la que hace referencia el controlador. La asignación de IDs y controladores de eventos permite visores de diapositivas, mejoras de accesibilidad y otros flujos de trabajo interactivos con SVG.

Preguntas frecuentes

¿Cuándo debería usar SVGOptions.setVectorizeText en lugar de SvgExternalFontsHandling.Vectorize?

Utilice SVGOptions.setVectorizeText cuando todo el texto deba ser independiente de las fuentes. Utilice SvgExternalFontsHandling.Vectorize cuando solo el texto que utiliza fuentes externas deba convertirse en gráficos.

¿Cuál es la mejor manera de reducir el tamaño de un SVG?

Comience comprimiendo las imágenes incrustadas, eliminando las áreas recortadas de las imágenes y eligiendo archivos de fuentes enlazados cuando el entorno de destino pueda servirlos. Pruebe el resultado porque la reducción de la resolución de la imagen, la menor calidad JPEG y el texto vectorizado tienen diferentes compromisos entre calidad y tamaño.

¿Puedo modificar los elementos SVG exportados después de la exportación?

Sí. Asigne IDs mediante un controlador de formato y, a continuación, seleccione los elementos SVG correspondientes en su herramienta de post-procesado o script del navegador.

Convertir presentaciones a HTML5 en JavaScript