DHTMLX Spreadsheet. Import and export to .xlsx example
This demo shows how to import .xlsx files into DHTMLX Spreadsheet using load("", "xlsx") and export data to Excel format with export.xlsx().
Live example
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
menu: true,
toolbarBlocks: ["default", "file"]
});
spreadsheet.parse(dataset);
function exportXlsx() {
spreadsheet.export.xlsx("any_file_name");
}
function importXlsx() {
spreadsheet.load("", "xlsx");
}
<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css" />
<section class="dhx_sample-controls">
<button class="dhx_sample-btn dhx_sample-btn--flat" onclick="exportXlsx()">Export xlsx</button>
<button class="dhx_sample-btn dhx_sample-btn--flat" onclick="importXlsx()">Import xlsx</button>
</section>
<!-- component container -->
<div id="spreadsheet" style="height: calc(100% - 60px); width: 100%;"></div>
<!-- dataset -->
<script>
const dataset = {
sheets: [
{
name: "Products",
id: "products_id",
data: [
{
value: "Country",
css: "header bold left border-left border-right-gray",
format: "common",
cell: "A1",
},
{
value: "Product",
css: "header bold border-right-gray",
format: "common",
cell: "B1",
},
{
value: "Price",
css: "header bold right border-right-gray",
format: "common",
cell: "C1",
},
{
value: "Amount",
css: "header bold right border-right-gray",
format: "common",
cell: "D1",
},
{
value: "Total Price",
css: "header bold right border-right-gray200",
format: "common",
cell: "E1",
},
{
value: "Ecuador",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A2",
},
{
value: "Banana",
format: "common",
css: "text border-right-gray border-bottom-gray",
cell: "B2",
},
{
value: 6.68,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C2",
},
{
value: 430,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D2",
},
{
value: "=C2*D2",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
editorValue: "=",
cell: "E2",
},
{
value: "Belarus",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A3",
},
{
value: "Apple",
format: "common",
css: "text border-right-gray border-bottom-gray",
cell: "B3",
},
{
value: 3.75,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C3",
},
{
value: 600,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D3",
},
{
value: "=C3*D3",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
cell: "E3",
},
{
value: "Peru",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A4",
},
{
value: "Grapes",
format: "common",
css: "text border-right-gray border-bottom-gray",
cell: "B4",
},
{
value: 7.69,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C4",
},
{
value: 740,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D4",
},
{
value: "=C4*D4",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
cell: "E4",
},
{
value: "Egypt",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A5",
},
{
value: "Orange",
format: "common",
css: "text border-right-gray border-bottom-gray",
cell: "B5",
},
{
value: 5.86,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C5",
},
{
value: 560,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D5",
},
{
value: "=C5*D5",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
cell: "E5",
},
{
value: "South Africa",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A6",
},
{
value: "Grapefruit",
format: "common",
css: "text border-right-gray border-bottom-gray",
cell: "B6",
},
{
value: 8.58,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C6",
},
{
value: 800,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D6",
},
{
value: "=C6*D6",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
cell: "E6",
},
{
value: "Spain",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A7",
},
{
value: "Lemon",
format: "common",
css: "text border-right-gray border-bottom-gray",
cell: "B7",
},
{
value: 9.12,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C7",
},
{
value: 650,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D7",
},
{
value: "=C7*D7",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
cell: "E7",
},
{
value: "Iran",
format: "common",
css: "bold left bg border-left border-right-gray border-bottom-gray",
cell: "A8",
},
{
value: "Pomegranate",
format: "common",
css: "text border-right-gray border-bottom-gray",
edited: false,
cell: "B8",
},
{
value: 9.67,
format: "currency",
css: "right border-right-gray border-bottom-gray",
cell: "C8",
},
{
value: 300,
format: "number",
css: "right border-right-gray border-bottom-gray",
cell: "D8",
},
{
value: "=C8*D8",
format: "currency",
css: "bold right border-right-gray200 border-bottom-gray",
edited: false,
cell: "E8",
},
{
value: "Total",
edited: false,
editorValue: "T",
format: "common",
css: "total bold left bg border-left border-right-gray border-bottom-gray200",
cell: "A9",
},
{
value: "=COUNTA(B2:B8)",
edited: false,
editorValue: "=COUNTA(B2:B8)",
format: "common",
css: "total bold left border-right-gray border-bottom-gray200",
cell: "B9",
},
{
value: "=AVERAGE(C2:C8)",
edited: false,
editorValue: "=C2AVERAGE(C2:C8)",
format: "currency",
css: "total bold right border-right-gray border-bottom-gray200",
cell: "C9",
},
{
value: "=AVERAGE(D2:D8)",
format: "number",
css: "total bold right border-right-gray border-bottom-gray200",
edited: false,
cell: "D9",
},
{
value: "=AVERAGE(E2:E8)",
format: "currency",
css: "total bold right border-right-gray200 border-bottom-gray200",
edited: false,
cell: "E9",
},
],
freeze: { col: 1, row: 1 },
cols: [
{ width: 180, hidden: false },
{ width: 120, hidden: false },
{ width: 120, hidden: false },
{ width: 120, hidden: false },
{ width: 120, hidden: false },
],
rows: [
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 32, hidden: false },
{ height: 44, hidden: false },
],
merged: [],
},
],
styles: {
header: {
"border-top": "1px solid #B0B8CD",
"border-bottom": "1px solid #D4DAE4",
background: "#F2F2F2",
},
bold: {
"font-weight": "bold",
},
left: {
"white-space": "nowrap",
"text-align": "left",
"justify-content": "flex-start",
},
right: {
"white-space": "nowrap",
"text-align": "right",
"justify-content": "flex-end",
},
"border-left": {
"border-left": "1px solid #B0B8CD",
},
"border-right-gray": {
"border-right": "1px solid #D4DAE4",
},
"border-right-gray200": {
"border-right": "1px solid #B0B8CD",
},
"border-bottom-gray": {
"border-bottom": "1px solid #D4DAE4",
},
"border-bottom-gray200": {
"border-bottom": "1px solid #B0B8CD",
},
bg: {
background: "#F2F2F2",
},
text: {
"white-space": "nowrap",
},
total: {
"white-space": "nowrap",
},
wrap: {
"white-space": "normal",
"word-break": "break-all",
},
},
formats: [
{ name: "Common", id: "common", mask: "#,##0.##", example: "15" },
{
name: "Number",
id: "number",
mask: "#,##0.00",
example: "15.0031",
},
{
name: "Percent",
id: "percent",
mask: "#,##0.00%",
example: "15.0031",
},
{
name: "Currency",
id: "currency",
mask: "[$$]#,##0.00",
example: "15.0031",
},
{
name: "Date",
id: "date",
mask: "dd/mm/yyyy",
example: "44490.5625",
},
{
name: "Time",
id: "time",
mask: "h:mm am/pm",
example: "44490.5625",
timeFormat: 12,
},
{ name: "Text", id: "text", mask: "@", example: "some text" },
],
};
</script>Organizations that rely on Microsoft Excel for reporting need a way to bring existing workbooks into a web-based spreadsheet and export modified data back to .xlsx for distribution. Seamless two-way Excel support bridges the gap between desktop workflows and modern web applications.
This example initializes Spreadsheet with menu: true and toolbarBlocks: ["default", "file"], then uses spreadsheet.load("", "xlsx") to open a file picker for a local .xlsx file and spreadsheet.export.xlsx("any_file_name") to download the current data as an Excel file with a custom name.
Solution overview
- Initialize the Spreadsheet with
new dhx.Spreadsheet("spreadsheet", { menu: true, toolbarBlocks: ["default", "file"] })and load the inline dataset - Call
spreadsheet.load("", "xlsx")to open a file picker for importing a local.xlsxfile - Call
spreadsheet.export.xlsx("any_file_name")to download the current data as an.xlsxfile
Key points
- File controls enabled: The sample enables
menu: trueand the"file"toolbar block so import and export actions fit the file-oriented UI - File picker: Passing an empty string to
load()opens a browser file dialog, letting users select a local file without a server round-trip - Async import:
load()returns a Promise. Chain.then()for post-import logic
API reference
- load(): Loads data from an external file, including XLSX.
- export.xlsx(): Exports Spreadsheet data to an XLSX file.