Konvertieren Sie ein Excel Diagramm mit JavaScript über C++ in ein Bild

Das Umwandeln von Diagrammen in Bilder

In den Beispielen hier werden ein Kreisdiagramm und ein Säulendiagramm in Bilder umgewandelt.

Umwandeln eines Tortendiagramms in eine Bilddatei

Erstellen Sie zuerst ein Kreisdiagramm in Microsoft Excel und konvertieren Sie es anschließend mit Aspose.Cells for JavaScript über C++ in eine Bilddatei. Das Beispiel erstellt ein EMF-Bild basierend auf dem Kreisdiagramm in der Vorlage für Microsoft Excel.

Ausgabe: Bild des Tortendiagramms
todo:image_alt_text
  1. Erstellen Sie ein Kreisdiagramm in Microsoft Excel:
    1. Öffnen Sie eine neue Arbeitsmappe in Microsoft Excel.
    2. Geben Sie einige Daten in ein Arbeitsblatt ein.
    3. Erstellen Sie ein Kreisdiagramm basierend auf den Daten.
    4. Speichern Sie die Datei.
Die Eingabedatei.
todo:image_alt_text
  1. Laden Sie Aspose.Cells herunter und installieren Sie es:
    1. Laden Sie Aspose.Cells for JavaScript via C++ herunter.
    2. Installieren Sie es auf Ihrem Entwicklungscomputer.

Alle Aspose Komponenten arbeiten im Evaluierungsmodus, wenn sie zuerst installiert werden. Der Evaluierungsmodus hat kein Zeitlimit und fügt nur Wasserzeichen in Ausgabedokumente ein.

  1. Ein Projekt erstellen:
    1. Starten Sie Ihre bevorzugte IDE.
    2. Erstellen Sie eine neue Konsolenanwendung. Dieses Beispiel verwendet eine JavaScript-Anwendung, aber Sie können sie mit jeder JavaScript-Laufzeitumgebung erstellen.
    3. Fügen Sie eine Referenz hinzu. Dieses Projekt verwendet Aspose.Cells, also fügen Sie eine Referenz zu Aspose.Cells for JavaScript über C++ hinzu.
    4. Schreiben Sie den Code, der das Diagramm findet und konvertiert. Unten ist der vom Komponenten verwendete Code, um die Aufgabe zu erledigen. Sehr wenige Zeilen Code werden verwendet.
<!DOCTYPE html>
<html>
    <head>
        <title>Aspose.Cells Example</title>
    </head>
    <body>
        <h1>Convert Chart to Image 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 from the uploaded file
            const workbook = new Workbook(new Uint8Array(arrayBuffer));

            // Get the designer chart (first chart) in the first worksheet of the workbook.
            const chart = workbook.worksheets.get(0).charts.get(0);

            // Convert the chart to an image (EMF) and prepare download link
            const imageData = chart.toImage(AsposeCells.ImageType.Emf);
            const blob = new Blob([imageData]);
            const downloadLink = document.getElementById('downloadLink');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'PieChart.out.emf';
            downloadLink.style.display = 'block';
            downloadLink.textContent = 'Download Chart Image';

            document.getElementById('result').innerHTML = '<p style="color: green;">Chart converted to EMF successfully! Click the download link to get the image.</p>';
        });
    </script>
</html>

Ein Säulendiagramm in eine Bilddatei konvertieren

Erstellen Sie zuerst ein Säulendiagramm in Microsoft Excel und konvertieren Sie es in eine Bilddatei, wie oben beschrieben. Nach der Ausführung des Beispielcodes wird eine JPEG-Datei basierend auf dem Säulendiagramm in der Vorlage Excel-Datei erstellt.

Ausgabedatei: ein Säulendiagrammbild.
todo:image_alt_text
  1. Erstellen Sie ein Säulendiagramm in Microsoft Excel:
    1. Öffnen Sie eine neue Arbeitsmappe in Microsoft Excel.
    2. Geben Sie einige Daten in ein Arbeitsblatt ein.
    3. Erstellen Sie ein Säulendiagramm basierend auf den Daten.
    4. Speichern Sie die Datei.
Eingabedatei.
todo:image_alt_text
  1. Richten Sie ein Projekt mit den oben beschriebenen Referenzen ein.
  2. Konvertieren Sie das Diagramm dynamisch in ein Bild. Im Folgenden ist der vom Komponenten verwendete Code, um die Aufgabe zu erledigen. Der Code ist ähnlich zu dem vorherigen:
<!DOCTYPE html>
<html>
    <head>
        <title>Aspose.Cells Example - Convert Chart to Image</title>
    </head>
    <body>
        <h1>Convert Chart to Image</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, ImageType, 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();

            // Instantiate Workbook from uploaded file
            const workbook = new Workbook(new Uint8Array(arrayBuffer));

            // Get the designer chart (first chart) in the first worksheet of the workbook.
            const chart = workbook.worksheets.get(0).charts.get(0);

            // Convert the chart to an image (JPEG)
            const imageData = await chart.toImage(ImageType.Jpeg);

            // Create a Blob and provide a download link
            const blob = new Blob([imageData], { type: 'image/jpeg' });
            const downloadLink = document.getElementById('downloadLink');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'ColumnChart.out.jpeg';
            downloadLink.style.display = 'block';
            downloadLink.textContent = 'Download Chart Image';

            document.getElementById('result').innerHTML = '<p style="color: green;">Chart converted to image successfully! Click the download link to get the image.</p>';
        });
    </script>
</html>