Create & Download Excel, HTML, and Text files using JavaScript.

In this blog, we will look at how to generate and download excel, html, and text files.

1. Create & Download a excel(.xlsx) file using javascript.

Prepare your data in an array.

// Some dummy data for user details.
let data = [
    [ 'Id', 'FirstName', 'LastName', 'Mobile', 'Address' ], // This is your header.
    [ 1, 'Richard', 'Roe', '9874563210', 'Address' ],
    [ 2, 'Joe', 'Doakes', '7896541230', 'Address' ],
    [ 3, 'John', 'Smith', '8745632109', 'Address' ],
    [ 4, 'Joe', 'Sixpack', '9875647890', 'Address' ],
    [ 5, 'Richard', 'Thomson', '8632547890', 'Address' ]
];

Prepare data for excel.

let excelData = '';

// Prepare data for excel.You can also use html tag for create table for excel.
data.forEach(( rowItem, rowIndex ) => {   
    
    if (0 === rowIndex) {
        // This is for header.
	rowItem.forEach((colItem, colIndex) => {
	     excelData += colItem + ',';
	});
	excelData += "\r\n";

     } else {
        // This is data.
        rowItem.forEach((colItem, colIndex) => {
	   excelData += colItem + ',';   
	})
       excelData += "\r\n";       
     }
});

We have completed the preparing data. Now move towards creating a blob URL and download file.

// Create the blob url for the file. 
excelData = "data:text/xlsx," + encodeURI(excelData);

// Download the xlsx file.
let a = document.createElement("A");
a.setAttribute("href", excelData);
a.setAttribute("download", "filename.xlsx");
document.body.appendChild(a);
a.click();

2. Create & Download a html(.html) file using javascript.

Prepare data for HTML.

// I am creating table but you can create any design as per your need.

let htmlData = `<table align="center" border="1">`;
    
data.forEach(( rowItem, rowIndex ) => {
   if (0 === rowIndex) {
       htmlData += `<tr>`;
       rowItem.forEach(( colItem, colIndex ) => {
          htmlData += `<th>${colItem}</th>`;
       });
       htmlData += `</tr>`;
   } else {
       htmlData += `<tr>`;
       rowItem.forEach(( colItem, colIndex ) => {
            htmlData += `<td>${colItem}</td>`;
       });
       htmlData += `</tr>`;
    }
});

We have completed the preparing data for HTML. Now move towards creating a blob URL and download file.

// Create the blob url for the file.
htmlData = "data:text/html," + encodeURI(htmlData);

// Download the html file.
let a = document.createElement("A");
a.setAttribute("href", htmlData);
a.setAttribute("download", "filename.html");
document.body.appendChild(a);
a.click();

3. Create & Download a text(.txt) file using javascript.

let text = 'You text goes here';

// Create the blob url for the file.
text = "data:text/plain," + encodeURI(text);

// Download the txt file.
let a = document.createElement("A");
a.setAttribute("href", text);
a.setAttribute("download", "filename.txt");
document.body.appendChild(a);
a.click();

Thanks for reading this article you can play with code and generate other files like CSV.