Export to XLSX

The JSS Render is an extension for Jspreadsheet that enables users to convert their data grids into XLSX files. This functionality simplifies exporting spreadsheet data, making it compatible with other systems or for sharing. It has been designed with efficiency in mind, and the JSS Render extension offers a straightforward solution for data conversion.

Documentation

Available settings

Property	Description
filename: string	File name. Default: jspreadsheet.xlsx
onbeforerender: function(spreadsheetConfig) => spreadsheetConfig	Intercept the render to overwrite and spreadsheet configuration.
onbeforesave: function(blob) => boolean \| void	Intercept the file generation.

Installation

Please choose one of the following options

Using NPM

npm install @jspreadsheet/render

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/render/dist/index.min.js"></script>

Code samples

Create XLSX using JavaScript

How to create an online XLSX exporter

JavaScript example

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<script src="https://cdn.jsdelivr.net/npm/jszip@3.6.0/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/render/dist/index.min.js"></script>

<div id='spreadsheet'></div>

<input type="button" value="Download" onclick="download()"/>

<script>
const download = function() {
    jspreadsheet.render(document.getElementById('spreadsheet'), {
        filename: 'file.xlsx',
    });
}

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2JhZjg0MWI3MWY2NTUyYTRlNGVlMTBkMmI1MTYyZGQ2ZmQ2YThiYzBiZDE5NTY0ZGIzNTYxMmY5OTA2ZmZmMTEzMjUxNTdmNmY4ZGFlZjViYTEwODNiNDNmZjhkZWNjZWZlZmRmMWE2YjFlZTQ5ZWE2NjQ5MGU3ZjRiNjc1NWEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T1RjNU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Add-on for Spreadsheet
jspreadsheet.setExtensions({ render });

// Create the spreadsheets
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [
        { minDimensions: [10, 10] },
        { minDimensions: [10, 10] },
    ],
});
</script>
</html>

See this example on codesandbox

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jspreadsheet from "jspreadsheet";
import render from "@jspreadsheet/render";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('N2JhZjg0MWI3MWY2NTUyYTRlNGVlMTBkMmI1MTYyZGQ2ZmQ2YThiYzBiZDE5NTY0ZGIzNTYxMmY5OTA2ZmZmMTEzMjUxNTdmNmY4ZGFlZjViYTEwODNiNDNmZjhkZWNjZWZlZmRmMWE2YjFlZTQ5ZWE2NjQ5MGU3ZjRiNjc1NWEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T1RjNU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Add-on for your JSS data grid
jspreadsheet.setExtensions({ render });

const download = function() {
    jspreadsheet.render(document.getElementById('spreadsheet'), {
        filename: 'file.xlsx',
    });
}

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet />
                <Worksheet />
            </Spreadsheet>
            <input type="button" value="Generate XLSX" onClick={() => download()} />
        </>
    );
}

See this example on codesandbox

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions">
        <Worksheet :minDimensions="[10,10]" />
        <Worksheet :minDimensions="[10,10]" />
    </Spreadsheet>
    <input type="button" value="Import CSV" @click="download" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import render from "@jspreadsheet/render";

// Define the data grid license
const license = 'N2JhZjg0MWI3MWY2NTUyYTRlNGVlMTBkMmI1MTYyZGQ2ZmQ2YThiYzBiZDE5NTY0ZGIzNTYxMmY5OTA2ZmZmMTEzMjUxNTdmNmY4ZGFlZjViYTEwODNiNDNmZjhkZWNjZWZlZmRmMWE2YjFlZTQ5ZWE2NjQ5MGU3ZjRiNjc1NWEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T1RjNU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Define the data grid extensions
const extensions = { render };

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        download() {
            // Spreadsheet instance
            jspreadsheet.render(this.$refs.spreadsheet.current[0].parent, {
                filename: 'file.xlsx',
            });
        }
    },
    data() {
        const spreadsheet = ref(null);

        return {
            spreadsheet,
            license,
            extensions,
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
import * as render from "@jspreadsheet/render";

import "/node_modules/jsuites/dist/jsuites.css";
import "/node_modules/jspreadsheet/dist/jspreadsheet.css";

const license = 'N2JhZjg0MWI3MWY2NTUyYTRlNGVlMTBkMmI1MTYyZGQ2ZmQ2YThiYzBiZDE5NTY0ZGIzNTYxMmY5OTA2ZmZmMTEzMjUxNTdmNmY4ZGFlZjViYTEwODNiNDNmZjhkZWNjZWZlZmRmMWE2YjFlZTQ5ZWE2NjQ5MGU3ZjRiNjc1NWEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6T1RjNU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense(license);

// Extensions
jspreadsheet.setExtensions({ render });

@Component({
  selector: "app-root",
  template: `<div #spreadsheet></div>
    <input type="button" value="Import CSV" (click)="this.export()" />`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
          worksheets: [
              { minDimensions: [10, 10] },
              { minDimensions: [10, 10] }
          ]
        });
    }
    export() {
        // Spreadsheet instance
        jspreadsheet.render(this.worksheets[0].parent, {
            filename: 'file.xlsx',
        });
    }
}

Examples

Integration with React

React spreadsheet working example.

Basic example

Click on the download button below to export the following JSS spreadsheet to XLSX.