この記事は元々、ブログ ガーデンのグレープ シティの技術チームによって作成および公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。
まえがき | 問題の背景
SpreadJS は、Excel ワークブックにデータを簡単にロードして、フロントエンド ブラウザ アプリケーションの Web ページに表示できる純粋なフロントエンド スプレッドシート コントロールです。
場合によっては、複数のワークブック (さまざまな部門の月次売上レポートなど) のデータを 1 つのワークブックに結合する必要がある場合があります。これを行う 1 つの方法は、SpreadJS の複数の非表示インスタンスを使用してすべてのワークブックをロードし、それらを 1 つのワークブックに結合することです。 1 つのスプレッドシート。
この記事では、複数の Excel ブックを結合し、フロントエンド ブラウザー アプリケーションで 1 つのスプレッドシートとして表示する方法を説明します。
セットアイテム
SpreadJS をロードするには、メインの JavaScript ライブラリと CSS ファイルを追加する必要があります。Excel ファイルもロードしているため、ExcelIO JavaScript ライブラリを追加する必要があります。これを行うには、HTML ファイルの場所に移動し、NPM を使用して SpreadJS ファイルをインストールします。
npm i @grapecity/spread-sheets @grapecity/spread-excelio
次に、HTML コードでこれらのファイルを参照します。
\<!DOCTYPE html\>
\<html xmlns="http://www.w3.org/1999/xhtml"\>
\<head\>
\<meta charset="utf-8" /\>
\<title\>Multiple Sheet Merging\</title\>
\<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" /\>
\<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"\>\</script\>
\<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"\>\</script\>
\</head\>
\</html\>
次に、SpreadJS インスタンスを保持する DIV 要素を追加します。
\<body\>
\<div id="ss" style="width: 800px; height: 700px; border: 1px solid gray"\>\</div\>
\</body\>
Spread インスタンス、ExcelIO、および非表示の Spread インスタンスを保持する配列を初期化するコードを追加します。これは、結合する前にすべての Excel ファイルをロードするために使用します。
var hiddenWorkbooks, hiddenSpreadIndex, excelIO, spread;
window.onload = function () {
hiddenSpreadIndex = -1;
hiddenWorkbooks = new Array();
excelIO = new GC.Spread.Excel.IO();
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
}
フロントエンド アプリケーションに Excel ファイルをロードする
このページでは、ユーザーが任意の数のワークブックをロードし、ボタンをクリックしてワークブックを 1 つにマージし、SpreadJS で表示できるようにするコードを追加します。これを行うには、次の HTML コードを追加します。
\<input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" /\>
\<input type="button" id="addWorkbook" value="Add Workbook" onclick="CreateNewSpreadDiv()" /\>
\<div id="workbookListBlock" style="display:none"\>
\<p\>Workbooks to merge:\</p\>
\<ul id="workbookList"\>\</ul\>
\<input type="button" id="mergeWorkbooks" value="Merge Workbooks" onclick="MergeWorkbooks()" /\>
\</div\>
ユーザーはファイル入力をクリックしてファイルを選択し、「ワークブックの追加」ボタンをクリックします。これにより、Excel ファイルを一時的にロードして非表示ワークブックのリストに追加するために使用される SpreadJS インスタンスを保持する新しい非表示 DIV 要素が作成されます。
function CreateNewSpreadDiv() {
hiddenSpreadIndex++;
var newDiv = document.createElement("div");
newDiv.style.cssText = "display:none; width: 800px; height: 600px; border: 1px solid gray";
newDiv.id = "hiddenWorkbook" + hiddenSpreadIndex;
document.body.appendChild(newDiv);
var hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById(newDiv.id));
hiddenWorkbooks.push(hiddenWorkbook);
AddWorkbookToImportList();
}
次に、関数は ExcelIO コードを使用して別の関数を呼び出し、Excel ファイルを非表示の Spread インスタンスにロードします。
function AddWorkbookToImportList() {
var excelFile = document.getElementById("fileDemo").files[0];
excelIO.open(excelFile, function (json) {
var workbookObj = json;
hiddenWorkbooks[hiddenSpreadIndex].fromJSON(workbookObj);
AddWorkbookNameElement(document.getElementById("fileDemo").files[0].name);
document.getElementById("fileDemo").value = "";
}, function (e) {
console.log(e);
});
}
ユーザーにフィードバックを提供するために、マージするファイルのリストを表示します。ここでは「AddWorkbookNameElement」関数として示されています。
function AddWorkbookNameElement(workbookName) {
if (document.getElementById("workbookListBlock").style.display == "none") {
document.getElementById("workbookListBlock").style.display = "block";
}
var newDiv = document.createElement("LI");
var textNode = document.createTextNode(workbookName);
newDiv.appendChild(textNode);
document.getElementById("workbookList").appendChild(newDiv);
}
フロントエンド アプリケーションで Excel ファイルをマージする
[外部リンク画像の転送に失敗しました。ソース サイトには盗難防止リンク メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-0U6AlMpb-1685089090317)(media/4946fef31b3121def89b28d676508f6d.png)]
ユーザーが最終的にすべてのワークブックを 1 つに結合する準備ができたら、「ワークブックを結合」ボタンをクリックして、各ワークブック内のすべてのワークシートをページに表示されている SpreadJS インスタンスにコピーできます。
function MergeWorkbooks() {
for (var w = 0; w \< hiddenWorkbooks.length; w++) {
if (GC.Spread.Sheets.LicenseKey == null) {
for (var s = 1; s \< hiddenWorkbooks[w].getSheetCount(); s++) {
CopySheet(w, s);
}
} else {
for (var s = 0; s \< hiddenWorkbooks[w].getSheetCount(); s++) {
CopySheet(w, s);
}
}
}
spread.removeSheet(0);
}
function CopySheet(workbookIndex, sheetIndex) {
spread.addSheet();
var sheetJson = JSON.stringify(hiddenWorkbooks[workbookIndex].getSheet(sheetIndex).toJSON());
spread.suspendPaint();
hiddenWorkbooks[workbookIndex].getNamedStyles().forEach(function (namedStyle) {
spread.addNamedStyle(namedStyle);
});
spread.getSheet(spread.getSheetCount()-1).fromJSON(JSON.parse(sheetJson));
spread.resumePaint();
}
注意すべき点が 1 つあります。ワークブックで名前付きスタイルを使用している場合は、このスタイルを表示されている SpreadJS インスタンスに追加する必要があります。そうしないと、単一のシートを複製しているため、正しく表示されません。これは上記の関数に示されており、「spread.addNamedStyle()」に追加できます。
このコードを追加すると、複数の Excel ワークブックをロードし、SpreadJS を使用してそれらを 1 つに結合できるようになります。この機能を試してみたい場合、または SpreadJS の他の素晴らしい機能を確認したい場合は、Grape City の公式 Web サイトにアクセスして、今すぐ試用版をダウンロードしてください。
>>>>>>詳しく読む: