Rendera presentationsbilder som SVG-bilder i JavaScript

Vad den här sidan handlar om

Exportera PowerPoint-bilder som SVG-bilder i JavaScript och kontrollera teckensnitt, text, bilder, ID:n och händelser med Aspose.Slides.

Översikt

SVG är ett skalbart XML-baserat bildformat som fungerar bra för webbpublicering, bildspelsvisare, tillgänglighetsarbetsflöden och automatiserad efterbehandling. Aspose.Slides för Node.js via Java exporterar varje bild till en separat SVG‑fil och låter dig styra hur text, teckensnitt, bilder och SVG‑element skrivs.

Använd SVGOptions när den exporterade SVG‑filen måste vara kompakt, förutsägbar i olika webbläsare eller klar för interaktiv användning.

Exportera en bild som SVG

Skapa en Presentation, välj en bild och skriv den till en ström med Slide.writeAsSvg. Följande exempel exporterar varje bild i en presentation som en separat SVG‑fil.

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();
}

Filnamnet använder Slide.getSlideNumber istället för loop‑indexet. Du kan även exportera en enskild form med Shape.writeAsSvg när en bildvisare eller webbsida endast behöver den formen.

Konfigurera SVG‑utdata

SVGOptions styr SVG‑renderingen. För textramar inkluderar SVGOptions.setUseFrameSize textramen i renderingsområdet, och SVGOptions.setUseFrameRotation bestämmer om ramrotationen tillämpas. Ställ in SVGOptions.setDisableFontLigatures till true när text måste renderas utan ligaturer.

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();
}

Styr text och teckensnitt

Vektorisera all text

Ställ in SVGOptions.setVectorizeText till true för att skriva all bildtext som vektorgrafik. Detta eliminerar beroenden av teckensnitt och gör det visuella resultatet mer enhetligt i olika webbläsare, men texten blir inte längre valbar eller sökbar som SVG‑text.

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();
}

Välj hur externa teckensnitt hanteras

SVGOptions.setExternalFontsHandling använder ett SvgExternalFontsHandling‑värde för teckensnitt som laddas externt. Välj AddLinksToFontFiles för att referera separata teckensnitts‑filer, Embed för att inkludera teckensnittsdata i SVG:n, eller Vectorize för att rendera endast den text som använder externa teckensnitt som grafik. Verifiera teckensnittslicensiering innan du bäddar in teckensnitt.

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();
}

Minska storleken på inbäddade bilder

Använd SVGOptions.setPicturesCompression för att sänka upplösningen på inbäddade bilder, SVGOptions.setDeletePicturesCroppedAreas för att utelämna beskurna källområden, och SVGOptions.setJpegQuality för att kontrollera JPEG‑kodningskvaliteten. Dessa inställningar minskar filstorleken på bekostnad av bildkvalitet eller bevarade bilddata.

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();
}

Tilldela stabila ID:n till former och text

Skicka en formateringskontroller till SVGOptions.setShapeFormattingController för att ange SvgShape.setId för varje SVG‑form. En kontroller som även hanterar text‑spans kan sätta SvgTSpan.setId‑värden på text‑tspan‑element.

Följande kontroller använder Shape.getOfficeInteropShapeId, vilket är stabilt under formens livstid, samt en upprepningsbar räknare för dess text‑spans. Detta gör de genererade ID:n lämpliga för efterbehandling av en oförändrad presentation.

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();
}

Lägg till SVG‑händelsehanterare

I en formateringskontroller, anropa SvgShape.setEventHandler med ett SvgEvent‑värde för att lägga till en JavaScript‑händelsehanterare till en exporterad form. Tilldela kontrollern med SVGOptions.setShapeFormattingController och definiera JavaScript‑funktionen på sidan eller i SVG‑dokumentet som hostar resultatet.

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();
}

Värdsidan kan definiera den JavaScript‑funktion som refereras av hanteraren. Tilldelning av ID:n och händelsehanterare möjliggör bildvisare, förbättringar för tillgänglighet och andra interaktiva SVG‑arbetsflöden.

Vanliga frågor

När bör jag använda SVGOptions.setVectorizeText istället för SvgExternalFontsHandling.Vectorize?

Använd SVGOptions.setVectorizeText när all text måste vara oberoende av teckensnitt. Använd SvgExternalFontsHandling.Vectorize när endast den text som använder externa teckensnitt ska konverteras till grafik.

Vad är det bästa sättet att göra en SVG mindre?

Börja med att komprimera inbäddade bilder, ta bort beskurna bildområden och välja länkade teckensnitts‑filer när målmiljön kan leverera dem. Testa resultatet eftersom lägre bildupplösning, lägre JPEG‑kvalitet och vektorisering av text har olika kompromisser mellan kvalitet och storlek.

Kan jag ändra exporterade SVG‑element efter export?

Ja. Tilldela ID:n via en formateringskontroller och välj sedan de motsvarande SVG‑elementen i ditt efterbearbetningsverktyg eller i ett browserskript.