In this blog, we will look at how to generate and download excel, html, and text files.<\/p>\n\n\n\n
Prepare your data in an array.<\/p>\n\n\n\n
\/\/ Some dummy data for user details.\nlet data = [\n [ 'Id', 'FirstName', 'LastName', 'Mobile', 'Address' ], \/\/ This is your header.\n [ 1, 'Richard', 'Roe', '9874563210', 'Address' ],\n [ 2, 'Joe', 'Doakes', '7896541230', 'Address' ],\n [ 3, 'John', 'Smith', '8745632109', 'Address' ],\n [ 4, 'Joe', 'Sixpack', '9875647890', 'Address' ],\n [ 5, 'Richard', 'Thomson', '8632547890', 'Address' ]\n];<\/pre>\n\n\n\nPrepare data for excel.<\/p>\n\n\n\n
let excelData = '';\n\n\/\/ Prepare data for excel.You can also use html tag for create table for excel.\ndata.forEach(( rowItem, rowIndex ) => { \n \n if (0 === rowIndex) {\n \/\/ This is for header.\n\trowItem.forEach((colItem, colIndex) => {\n\t excelData += colItem + ',';\n\t});\n\texcelData += "\\r\\n";\n\n } else {\n \/\/ This is data.\n rowItem.forEach((colItem, colIndex) => {\n\t excelData += colItem + ','; \n\t})\n excelData += "\\r\\n"; \n }\n});<\/pre>\n\n\n\nWe have completed the preparing data. Now move towards creating a blob URL and download file.<\/p>\n\n\n\n
\/\/ Create the blob url for the file. \nexcelData = "data:text\/xlsx," + encodeURI(excelData);\n\n\/\/ Download the xlsx file.\nlet a = document.createElement("A");\na.setAttribute("href", excelData);\na.setAttribute("download", "filename.xlsx");\ndocument.body.appendChild(a);\na.click();<\/pre>\n\n\n\n2. Create & Download a html(.html) file using javascript.<\/h3>\n\n\n\n
Prepare data for HTML.<\/p>\n\n\n\n
\/\/ I am creating table but you can create any design as per your need.\n\nlet htmlData = `<table align="center" border="1">`;\n \ndata.forEach(( rowItem, rowIndex ) => {\n if (0 === rowIndex) {\n htmlData += `<tr>`;\n rowItem.forEach(( colItem, colIndex ) => {\n htmlData += `<th>${colItem}<\/th>`;\n });\n htmlData += `<\/tr>`;\n } else {\n htmlData += `<tr>`;\n rowItem.forEach(( colItem, colIndex ) => {\n htmlData += `<td>${colItem}<\/td>`;\n });\n htmlData += `<\/tr>`;\n }\n});<\/pre>\n\n\n\nWe have completed the preparing data for HTML. Now move towards creating a blob URL and download file.<\/p>\n\n\n\n
\/\/ Create the blob url for the file.\nhtmlData = "data:text\/html," + encodeURI(htmlData);\n\n\/\/ Download the html file.\nlet a = document.createElement("A");\na.setAttribute("href", htmlData);\na.setAttribute("download", "filename.html");\ndocument.body.appendChild(a);\na.click();<\/pre>\n\n\n\n3. Create & Download a text(.txt) file using javascript.<\/h3>\n\n\n\n
let text = 'You text goes here';\n\n\/\/ Create the blob url for the file.\ntext = "data:text\/plain," + encodeURI(text);\n\n\/\/ Download the txt file.\nlet a = document.createElement("A");\na.setAttribute("href", text);\na.setAttribute("download", "filename.txt");\ndocument.body.appendChild(a);\na.click();<\/pre>\n\n\n\nThanks for reading this article you can play with code and generate other files like CSV.<\/p>\n","protected":false},"excerpt":{"rendered":"