【JavaScript】SheetJSを使ってExcelファイルを編集する方法

2024年12月11日

概要

しばらく前に、JSONデータを新規Excelファイルに変換する方法を紹介しました。
この方法だと、セルを指定した値のセットはできませんでした。

注意点

1.既存Excelファイルの書式は失われる。

2.セルの範囲(range)が未設定だと、編集に指定したExcelにすでに値があるセルのみ編集できる

3.セルの範囲(range)外のセルを編集しようとすると、無視される

※本記事では既存のファイルを読み込み + α(編集)をしたExcelファイルにする方法紹介します。
そのため、ExcelファイルAに直接変更を加えるわけではないです。

ExcelファイルA をExcelファイルA'に変換します。
致命的ですが、その際書式は失われます。　

ExcelファイルA のまま編集したかったのですが、SheetJSだと厳しいようです。
※SheetJS PRO(有料版)ならいけるかも。

コード

今回は本来引数として受け取る値を、下記に記述しています。		
必要に応じて、edit( )をedit(引数1,引数2...... )として値を受け取ってください。
		
関数に引数として渡す値:data、sheet_name、range
data...連想配列で、データを渡す。
sheet_name...編集したいシートの名前。
range...編集したいセル範囲。
cell_index...値設定したいセルの場所。A1、D3など
value...指定したい値。
type...値の形式。s(テキスト)、n(数字)
詳細は、https://docs.sheetjs.com/docs/csf/cell

<!DOCTYPE html>
<html lang="ja">

<head>

	<title>Excelをeditしちゃうぞ〜</title>
	<meta charset="UTF-8">


</head>

<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>

<body>

	<div id="app">

		<input type="file" accept=".xlsx"　id="target_file"><br>
		<input type="button" onclick="edit()" value="EDIT!">

	</div>

</body>


<script>

	function edit( ) {

		/*下記3つは、引数として受け取ることを想定。今回は直接記述する。*/
		const data = { 1: { cell_index:'D5', value:'ういっす', type:'s' }, 2: { cell_index:'D4', value:'えへ', type:'s' } };
		const sheet_name = 'Sheet1';
		const range = 'A1:D10';


		const max = Object.keys(data);
		const fileName = document.getElementById("target_file").files[0].name;
		let fileReader = new FileReader();
		let file = document.getElementById("target_file").files[0];
		fileReader.readAsArrayBuffer(file);

		fileReader.onload = function (event) {
			
			let uint8 = new Uint8Array(event.target.result);
			let workBook = XLSX.read(uint8, { type: "array" });
			let ws = workBook.Sheets[sheet_name];
			ws['!ref'] = range;

			for( let i=1 ; i<=max.length  ; i++ ){

				const index = data[i].cell_index;
				const value = data[i].value;
				const type = data[i].type;

				ws[index] = {t: type , v: value, h: value, w: value};

			}
		
			XLSX.writeFile(workBook, fileName);

		}

	}



</script>

</html>

DEMO

手順

1.ファイル選択ボタンで、Excelファイルを選択
2.EDIT!ボタンを押す


1.ファイル選択ボタンで下記エクセルを選択

2.EDIT!ボタンを押すと、設定した内容に編集したExcelファイルがダウンロードされる。

コードで設定してる値

    const data = { 1: { cell_index:'D5', value:'ういっす', type:'s' }, 2: { cell_index:'D4', value:'えへ', type:'s' } };
    const sheet_name = 'Sheet1';
    const range = 'A1:D10';

ライセンスについて

ライセンスは、Apache 2.0 Licenseです。

下記の内容の記述が必要です。

SheetJS Community Edition -- https://sheetjs.com/

Copyright (C) 2012-present   SheetJS LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.