Web Workers (Vue)

<template>
    <div class="container-fluid">
        <p>
            This sample demonstrates the "Simple single grid export" scenario and shows how to export FlexGrid in
            a background thread.
        </p>
        <button class="btn btn-default" :disabled="ctx1.preparing" @click="export1(ctx1)">{{ ctx1.exporting ? 'Cancel' :
            'Export' }}</button>&nbsp;
        <span>{{ (ctx1.progress * 100).toFixed(1) + "%" }}</span>
        <wj-flex-grid class="grid" :autoGenerateColumns=false headersVisibility="Column" allowMerging="All"
            :itemsSource="data" :isDisabled="ctx1.preparing" :initialized="initializeGrid">
            <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
            <wj-flex-grid-column header="Start Date" binding="start" format="d"></wj-flex-grid-column>
            <wj-flex-grid-column header="End Date" binding="end" format="d"></wj-flex-grid-column>
            <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
            <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column>
            <wj-flex-grid-column header="Amount" binding="amount" format="c"></wj-flex-grid-column>
            <wj-flex-grid-column header="Color" binding="color"></wj-flex-grid-column>
            <wj-flex-grid-column header="Pending" binding="amount2" format="c2"></wj-flex-grid-column>
            <wj-flex-grid-column header="Discount" binding="discount" format="p1"></wj-flex-grid-column>
            <wj-flex-grid-column header="Active" binding="active"></wj-flex-grid-column>
        </wj-flex-grid>

        <hr />

        <p>
            This sample demonstrates the "Custom document generation" scenario and shows how to export FlexPie
            (as a SVG image), FlexGrid and PNG image to a PDF in a background thread.
        </p>
        <p>
            The <a href="https://www.npmjs.com/package/xmldom">xmldom</a> library is used here to bring DOM
            support to the server to be able to draw SVG.
        </p>
        <button class="btn btn-default" :disabled="ctx2.preparing" @click="export2(ctx2)">{{ ctx2.exporting ? 'Cancel' :
            'Export' }}</button>&nbsp;
        <span>{{ (ctx2.progress * 100).toFixed(1) + "%" }}</span>
        <p></p>
        <div class="row">
            <div class="col-md-6">
                <wj-flex-pie :itemsSource="totals" binding="value" bindingName="name" :innerRadius="0.75"
                    :initialized="initializePie">
                    <wj-flex-pie-data-label content="{value:c1}" position="Inside"></wj-flex-pie-data-label>
                </wj-flex-pie>
            </div>
            <div class="col-md-6">
                <wj-flex-grid class="grid" :autoGenerateColumns=false headersVisibility="Column" allowMerging="All"
                    :itemsSource="data" :isDisabled="ctx2.preparing" :initialized="initializeGrid2">
                    <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Start Date" binding="start" format="d"></wj-flex-grid-column>
                    <wj-flex-grid-column header="End Date" binding="end" format="d"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Amount" binding="amount" format="c"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Color" binding="color"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Pending" binding="amount2" format="c2"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Discount" binding="discount" format="p1"></wj-flex-grid-column>
                    <wj-flex-grid-column header="Active" binding="active"></wj-flex-grid-column>
                </wj-flex-grid>
            </div>
        </div>

        <hr />

        <p>
            This sample demonstrates the "Low-level usage of Web Workers API" scenario and shows how to export
            FlexGrid to a PDF in a background thread using Web Workers API.
        </p>
        <button class="btn btn-default" :disabled="ctx3.preparing" @click="export3(ctx3)">{{ ctx3.exporting ? 'Cancel' :
            'Export' }}</button>&nbsp;
        <span>{{ (ctx3.progress * 100).toFixed(1) + "%" }}</span>
        <wj-flex-grid class="grid" :autoGenerateColumns=false headersVisibility="Column" allowMerging="All"
            :itemsSource="data" :isDisabled="ctx3.preparing" :initialized="initializeGrid3">
            <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
            <wj-flex-grid-column header="Start Date" binding="start" format="d"></wj-flex-grid-column>
            <wj-flex-grid-column header="End Date" binding="end" format="d"></wj-flex-grid-column>
            <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
            <wj-flex-grid-column header="Product" binding="product"></wj-flex-grid-column>
            <wj-flex-grid-column header="Amount" binding="amount" format="c"></wj-flex-grid-column>
            <wj-flex-grid-column header="Color" binding="color"></wj-flex-grid-column>
            <wj-flex-grid-column header="Pending" binding="amount2" format="c2"></wj-flex-grid-column>
            <wj-flex-grid-column header="Discount" binding="discount" format="p1"></wj-flex-grid-column>
            <wj-flex-grid-column header="Active" binding="active"></wj-flex-grid-column>
        </wj-flex-grid>
    </div>
</template>

<script setup>
import * as chart from "@mescius/wijmo.chart";
import "@mescius/wijmo.chart.render";
import * as pdf from "@mescius/wijmo.pdf";
import * as gridPdf from "@mescius/wijmo.grid.pdf";
import { getExpenses, getData } from "./data";
import { ref } from "vue";

const docName = ref("FlexGrid.pdf");
const gridExportSettings = ref({
    styles: {
        cellStyle: {
            backgroundColor: "#ffffff",
            borderColor: "#c6c6c6",
        },
        altCellStyle: {
            backgroundColor: "#f9f9f9",
        },
        groupCellStyle: {
            backgroundColor: "#dddddd",
        },
        headerCellStyle: {
            backgroundColor: "#eaeaea",
        },
    },
});
const data = ref(getData(1500));
const totals = ref(
    ((totals) => [
        { name: "Hotel", value: totals.hotel },
        { name: "Transport", value: totals.transport },
        { name: "Meal", value: totals.meal },
        { name: "Fuel", value: totals.fuel },
        { name: "Misc", value: totals.Misc },
    ])(getExpenses().totals),
);
const ctx1 = ref({
    exporting: false,
    progress: 0,
    preparing: false,
    worker: null,
});
const ctx2 = ref({
    exporting: false,
    progress: 0,
    preparing: false,
    worker: null,
});
const ctx3 = ref({
    exporting: false,
    progress: 0,
    preparing: false,
    worker: null,
});
const flexGrid = ref(null);
const flexGrid2 = ref(null);
const flexGrid3 = ref(null);
const flexPie = ref(null);

function initializeGrid(ctl) {
    flexGrid.value = ctl;
}

function initializeGrid2(ctl) {
    flexGrid2.value = ctl;
}

function initializeGrid3(ctl) {
    flexGrid3.value = ctl;
}

function initializePie(ctl) {
    flexPie.value = ctl;
}

function export1(ctx) {
    if (!ctx.exporting) {
        start(ctx, "./export-grid.js", () => {
            gridPdf.PdfWebWorkerClient.exportGrid(ctx.worker, flexGrid.value, docName.value, gridExportSettings.value, null, (_progress) => {
                progress(ctx, _progress);
            });
        });
    } else {
        cancel(ctx);
    }
}

function export2(ctx) {
    if (!ctx.exporting) {
        start(ctx, "./export.js", () => {
            gridPdf.PdfWebWorkerClient.addString(ctx.worker, "Title", "title");
            gridPdf.PdfWebWorkerClient.addImage(ctx.worker, "resources/canada.png", "flag", null);
            flexPie.value.saveImageToDataUrl(chart.ImageFormat.Svg, (url) => {
                gridPdf.PdfWebWorkerClient.addImage(ctx.worker, url, "chart", null);
            });
            gridPdf.PdfWebWorkerClient.addGrid(ctx.worker, flexGrid2.value, "grid", gridExportSettings.value);
            //
            gridPdf.PdfWebWorkerClient.export(
                ctx.worker,
                null,
                (data) => pdf.saveBlob(data.blob, docName.value),
                (_progress) => progress(ctx, _progress),
            );
        });
    } else {
        cancel(ctx);
    }
}

function export3(ctx) {
    if (!ctx.exporting) {
        start(ctx, "./api.js", () => {
            ctx.worker.addEventListener("message", (e) => {
                if (e.data.type === "progress") {
                    progress(ctx, e.data.value);
                } else {
                    pdf.saveBlob(new Blob([new Uint8Array(e.data.data)], { type: "application/pdf" }), docName.value);
                }
            });
            //
            var gridData = gridPdf.PdfWebWorkerClient.serializeGrid(flexGrid3.value, gridExportSettings.value);
            // Send gridData as a tranferable object
            ctx.worker.postMessage({ grid: gridData, settings: JSON.stringify(gridExportSettings.value) }, [gridData]);
        });
    } else {
        cancel(ctx);
    }
}

/**
 * Creates web worker that executes the module from the specified URL.
 * @param url The module URL, relative to the src/workers directory.
 * @param ready
 */
function loadWorker(url, ready) {
    let worker = new Worker("src/workers/worker-loader.js");
    //
    worker.addEventListener("message", (e) => {
        if (e.data === "#ready#") {
            ready();
        }
    });
    //
    worker.postMessage({ url: url });
    //
    return worker;
}

function start(ctx, url, ready) {
    ctx.preparing = true;
    ctx.progress = 0;
    ctx.worker = loadWorker(url, () => ready());
}

function progress(ctx, _progress) {
    if (_progress === 0 || _progress === 1) {
        ctx.preparing = false;
        ctx.exporting = _progress === 0;
    }
    ctx.progress = _progress;
}

function cancel(ctx) {
    ctx.worker.terminate();
    ctx.exporting = false;
    ctx.progress = 0;
    ctx.worker = null;
}
</script>

<style>
body {
    margin-bottom: 24px;
}

.grid {
    margin-top: 20px;
    height: 300px;
}
</style>