Skip to main content

DHTMLX Spreadsheet. Custom import and export path example

This demo shows how to configure custom paths to the Excel import and export WebAssembly workers in DHTMLX Spreadsheet using the importModulePath and exportModulePath properties.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    // the path to the export module
    exportModulePath: "https://cdn.dhtmlx.com/libs/json2excel/1.2/worker.js",
    // the path to the import module
    importModulePath: "https://cdn.dhtmlx.com/libs/excel2json/1.2/worker.js",
    menu: true
});

spreadsheet.parse(dataset);
<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = {
        styles: {
            bold: {
                "font-weight": "bold",
            },
            right: {
                "justify-content": "flex-end",
                "text-align": "right",
            },
        },
        data: [
            { cell: "a1", value: "Country", css:"bold" },
            { cell: "b1", value: "Product", css:"bold" },
            { cell: "c1", value: "Price", css:"right bold" },
            { cell: "d1", value: "Amount", css:"right bold" },
            { cell: "e1", value: "Total Price", css:"right bold" },

            { cell: "a2", value: "Ecuador" },
            { cell: "b2", value: "Banana" },
            { cell: "c2", value: 6.68, format: "currency" },
            { cell: "d2", value: 430 },
            { cell: "e2", value: 2872.4, format: "currency" },

            { cell: "a3", value: "Belarus" },
            { cell: "b3", value: "Apple" },
            { cell: "c3", value: 3.75, format: "currency" },
            { cell: "d3", value: 600 },
            { cell: "e3", value: 2250, format: "currency" },

            { cell: "a4", value: "Peru" },
            { cell: "b4", value: "Grapes" },
            { cell: "c4", value: 7.69, format: "currency" },
            { cell: "d4", value: 740 },
            { cell: "e4", value: 5690.6, format: "currency" },

            { cell: "a5", value: "Egypt" },
            { cell: "b5", value: "Orange" },
            { cell: "c5", value: 5.86, format: "currency" },
            { cell: "d5", value: 560 },
            { cell: "e5", value: 3281.6, format: "currency" },

            { cell: "a6", value: "South Africa" },
            { cell: "b6", value: "Grapefruit" },
            { cell: "c6", value: 8.58, format: "currency" },
            { cell: "d6", value: 800 },
            { cell: "e6", value: 6864, format: "currency" },

            { cell: "a7", value: "Spain" },
            { cell: "b7", value: "Lemon" },
            { cell: "c7", value: 9.12, format: "currency" },
            { cell: "d7", value: 650 },
            { cell: "e7", value: 5928, format: "currency" },

            { cell: "a8", value: "Iran" },
            { cell: "b8", value: "Pomegranate" },
            { cell: "c8", value: 9.67, format: "currency" },
            { cell: "d8", value: 300 },
            { cell: "e8", value: 2901, format: "currency" }
        ],
    };
</script>

Enterprise deployments often host all dependencies locally for security, compliance, or network reliability. When the default CDN paths for the Excel import/export workers are not accessible (behind a firewall, in an air-gapped environment, or on a private CDN), developers need to point the Spreadsheet to self-hosted worker files.

This example sets importModulePath and exportModulePath to explicit worker URLs for the Excel2Json and JSON2Excel libraries. With these paths configured, the Spreadsheet's import/export UI can use the specified workers for .xlsx import and export.

Solution overview​

  1. Provide the Excel2Json (worker.js) and JSON2Excel (worker.js) worker files from a CDN or your own hosted path
  2. Initialize the Spreadsheet with importModulePath: "path/to/excel2json/worker.js" and exportModulePath: "path/to/json2excel/worker.js"
  3. Enable Spreadsheet UI controls, such as the menu, so import/export actions can use the configured worker paths

Key points​

  • Default behavior: If neither path is set, the Spreadsheet uses DHTMLX CDN URLs automatically
  • XLSX only: These workers handle .xlsx files only. CSV and JSON loading does not require them
  • Independent paths: importModulePath and exportModulePath can point to different locations, allowing separate versioning of the import and export libraries

API reference​

Additional resources​