code-boxx/0-JS-ADD-EXCEL.MD

## 0-JS-ADD-EXCEL.MD

      
    Raw
  

              0-JS-ADD-EXCEL.MD
            
          
    JAVASCRIPT ADD ROWS TO EXCEL FILE

https://code-boxx.com/javascript-add-rows-excel/
NOTES

GIST does not allow Excel files. Convert x-dummy.csv to x-dummy.xlsx on your own, or use your own dummy Excel file.
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-demo.css
/* NOT IMPORTANT */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
  max-width: 400px;
}
form {
  padding: 20px;
  border: 1px solid #ededed;
  background: #f2f2f2;
}
input, select {
  display: block;
  width: 100%;
  padding: 10px;
}
input[type=file], select {
  border: 1px solid #c9c9c9;
  background: #fff;
}
input[type=submit] {
  margin-top: 20px;
  border: 0;
  color: #fff;
  background: #3c56b7;
  cursor: pointer;
}

## 1-demo.html
<!DOCTYPE html>
<html>
  <head>
    <title>Excel Append</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="0-demo.css">
    <!-- https://cdnjs.com/libraries/xlsx -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="1-append.js"></script>
    <!--
    <script src="2-prepend.js"></script>
    <script src="3-insert.js"></script>
    -->
  </head>
  <body>
    <form onsubmit="return demo()">
      <input id="picker" type="file" accept=".xls,.xlsx" required>
      <input type="submit" value="Go">
    </form>
  </body>
</html>

## 2-append.js
function demo () {
  // (A) FILE PICKER & READER
  var picker = document.getElementById("picker"),
      reader = new FileReader();

  // (B) EXCEL ADD ROWS
  reader.addEventListener("loadend", evt => {
    // (B1) GET WORKSHEET
    var workbook = XLSX.read(evt.target.result, {type: "binary"}),
        worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // (B2) APPEND NEW ROW & FORCE DOWNLOAD
    XLSX.utils.sheet_add_aoa(worksheet, [["NEW", "ROW"]], {origin: -1});
    XLSX.writeFile(workbook, "demoA.xlsx");
  });
  reader.readAsArrayBuffer(picker.files[0]);
  return false;
}

## 3-prepend.js
function demo () {
  // (A) FILE PICKER & READER
  var picker = document.getElementById("picker"),
      reader = new FileReader();

  // (B) EXCEL ADD ROWS
  reader.addEventListener("loadend", evt => {
    // (B1) GET WORKSHEET
    var workbook = XLSX.read(evt.target.result, {type: "binary"}),
        worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // (B2) PREPEND NEW ROW
    var data = XLSX.utils.sheet_to_json(worksheet, {header: 1})
    delete(worksheet); delete(workbook);
    data.splice(0, 0, ["NEW", "ROW"]);

    // (B3) SAVE UPDATED
    workbook = XLSX.utils.book_new();
    worksheet = XLSX.utils.aoa_to_sheet(data);
    XLSX.utils.book_append_sheet(workbook, worksheet);
    XLSX.writeFile(workbook, "demoB.xlsx");
  });
  reader.readAsArrayBuffer(picker.files[0]);
  return false;
}

## 4-insert.js
function demo () {
  // (A) FILE PICKER & READER
  var picker = document.getElementById("picker"),
      reader = new FileReader();

  // (B) EXCEL ADD ROWS
  reader.addEventListener("loadend", evt => {
    // (B1) GET WORKSHEET
    var workbook = XLSX.read(evt.target.result, {type: "binary"}),
        worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // (B2) INSERT AT EXACT ROW
    var data = XLSX.utils.sheet_to_json(worksheet, {header: 1})
    delete(worksheet); delete(workbook);
    data.splice(2, 0, ["NEW", "ROW"]);

    // (B3) SEARCH & INSERT
    var at = null;
    for (let [i,r] of Object.entries(data)) {
      if (r.includes("Jon Doe")) { at = i; break; }
    }
    if (at !== null) { data.splice(at, 0, ["ANOTHER", "ROW"]); }

    // (B4) SAVE UPDATED
    workbook = XLSX.utils.book_new();
    worksheet = XLSX.utils.aoa_to_sheet(data);
    XLSX.utils.book_append_sheet(workbook, worksheet);
    XLSX.writeFile(workbook, "demoC.xlsx");
  });
  reader.readAsArrayBuffer(picker.files[0]);
  return false;
}

## x-dummy.csv

          
            Joa Doe
            joa@doe.com

            
              Job Doe
              job@doe.com

            
              Joe Doe
              joe@doe.com

            
              Joi Doe
              joi@doe.com

            
              Jon Doe
              jon@doe.com

            
              Joy Doe
              joy@doe.com
	/* NOT IMPORTANT */
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	body {
	max-width: 400px;
	}
	form {
	padding: 20px;
	border: 1px solid #ededed;
	background: #f2f2f2;
	}
	input, select {
	display: block;
	width: 100%;
	padding: 10px;
	}
	input[type=file], select {
	border: 1px solid #c9c9c9;
	background: #fff;
	}
	input[type=submit] {
	margin-top: 20px;
	border: 0;
	color: #fff;
	background: #3c56b7;
	cursor: pointer;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Excel Append</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="0-demo.css">
	<!-- https://cdnjs.com/libraries/xlsx -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
	<script src="1-append.js"></script>
	<!--
	<script src="2-prepend.js"></script>
	<script src="3-insert.js"></script>
	-->
	</head>
	<body>
	<form onsubmit="return demo()">
	<input id="picker" type="file" accept=".xls,.xlsx" required>
	<input type="submit" value="Go">
	</form>
	</body>
	</html>
	function demo () {
	// (A) FILE PICKER & READER
	var picker = document.getElementById("picker"),
	reader = new FileReader();

	// (B) EXCEL ADD ROWS
	reader.addEventListener("loadend", evt => {
	// (B1) GET WORKSHEET
	var workbook = XLSX.read(evt.target.result, {type: "binary"}),
	worksheet = workbook.Sheets[workbook.SheetNames[0]];

	// (B2) APPEND NEW ROW & FORCE DOWNLOAD
	XLSX.utils.sheet_add_aoa(worksheet, [["NEW", "ROW"]], {origin: -1});
	XLSX.writeFile(workbook, "demoA.xlsx");
	});
	reader.readAsArrayBuffer(picker.files[0]);
	return false;
	}
	Joa Doe	joa@doe.com
	Job Doe	job@doe.com
	Joe Doe	joe@doe.com
	Joi Doe	joi@doe.com
	Jon Doe	jon@doe.com
	Joy Doe	joy@doe.com