{"id":10865,"date":"2021-10-29T10:00:00","date_gmt":"2021-10-29T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10865"},"modified":"2021-10-28T19:51:54","modified_gmt":"2021-10-28T10:51:54","slug":"export-csv-file-in-js","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10865","title":{"rendered":"Export CSV file in JS"},"content":{"rendered":"\n

This time I would like to share about export a file as CSV format using Javascript HandSonTable. HandSonTable works with many of most popular languages like : React, Angualr, Vue and Javascript. <\/p>\n\n\n\n

Then what is HandSonTable? HandSonTable is like data grid spreadsheet designed to hundreds of thousands of cells. HandSonTable is performed with so much features ex: search, sort, filter without delays. Let’s start!<\/p>\n\n\n\n

Firstly, we need to do is to import handsontable.full.min.js and handsontable.full.min.css in html. After importing, we can now use HandSonTable. To display HandSonTable, we need to add a new div<\/strong> with id or class name attribute.<\/p>\n\n\n\n

Import JS and Css file in header<\/p>\n\n\n\n

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/handsontable@10.0\/dist\/handsontable.full.min.js\"><\/script>\n<link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/handsontable@10.0\/dist\/handsontable.full.min.css\" \/> <\/code><\/pre>\n\n\n\n
Add new div and download button for export CSV format<\/p>\n\n\n\n
<div id=\"example1\"><\/div>\n<div class=\"controls\">\n  <button id=\"export-file\">Download CSV<\/button>\n<\/div><\/code><\/pre>\n\n\n\n
Let’s start JS code!<\/p>\n\n\n\n
For use HandSonTable, we must call that two attributes roughly first one is what place we want to append data so we will call  our Id named with example1<\/strong>, and second one is how much data display with rows<\/strong> and cols<\/strong> and what kind of data display. <\/p>\n\n\n\n
Then to call our id and button using javascript querySelector. <\/p>\n\n\n\n
const container = document.querySelector('#example1');\nconst button = document.querySelector('#export-file');<\/code><\/pre>\n\n\n\n
const hot = new Handsontable(container, {\n  data: Handsontable.helper.createSpreadsheetData(7, 7),\n  colHeaders: true,\n  rowHeaders: true,\n  hiddenRows: { rows: [1, 3, 5], indicators: true },\n  hiddenColumns: { columns: [1, 3, 5], indicators: true },\n  height: 'auto',\n  licenseKey: 'non-commercial-and-evaluation'\n});<\/code><\/pre>\n\n\n\n
To export a file, we can use tabename.getPlugin(‘exportFile’);<\/strong><\/p>\n\n\n\n
After button click action is done, for download the file we can use javascript addEventListener with click<\/strong> property. For downloadFile<\/strong> and fileExtension<\/strong> must be ‘csv’ and  fill your desire filename.<\/p>\n\n\n\n
button.addEventListener('click', () => {\n  exportPlugin.downloadFile('csv', {\n    bom: false,\n    columnDelimiter: ',',\n    columnHeaders: false,\n    exportHiddenColumns: true,\n    exportHiddenRows: true,\n    fileExtension: 'csv',\n    filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n    mimeType: 'text\/csv',\n    rowDelimiter: '\\r\\n',\n    rowHeaders: true\n  });\n});<\/code><\/pre>\n\n\n\n
Hoped you enjoyed reading this!<\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>