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 optionsUsing 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 exporterJavaScript 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', }); } }