SpreadJSを使ってJavaScriptにExcelファイルを導入してエクスポートします.
7695 ワード
JavaScriptは、複数のフレームをカバーし、直訳式、クライアントを簡単にカスタマイズできるスクリプト言語であり、Webアプリケーションでは、よりコード化とメンテナンスが容易である.Excelはユーザーに人気のある表計算ツールとして、直感的なインターフェース、優れた計算性能、グラフツールを利用して、データ統計の分野で不可欠なソフトウェアの一つとなっています.
一つの製品があれば、両方を完璧に融合させて、フロントエンドのテーブルのデータ処理、データの書き込み、データの可視化、オンライン文書などの分野で大いに異彩を放つことができます.SpreadJSは、このような機能レイアウトはExcelの高さと類似しており、大量のコード開発とテストを必要とせずにデータ展示、フロントエンドエクセル導入導出、グラフパネル、データバインディングなどの業務シーンの純粋な先端テーブルコントロールを実現することができます.
JavaScriptを使ってExcelの導入とエクスポートを実現します.
純粋なJavaScriptを通じて、Excelファイル機能の導入とエクスポートを完全に実現できます.そして、これらのファイルとI/O相互作用するインターフェースをエンドユーザーに提供します.本教程では、SpreadJSを利用して、JavaScriptで簡単にExcelファイルの導入とエクスポートの操作を実現し、またSpreadJSコンポーネントをHTMLページに追加することがどんなに簡単かを展示します.
仕事をよくしようとするなら,まず道具を研がなければならない. SpreadJSのフロントエンドテーブルコントロールをダウンロードして、同期体験をしてください.
JavaScriptの表計算ドキュメント項目を設定します.
新しいHTMLページを作成し、SpreadJSダウンロードパッケージのSpread.SheetsスクリプトとCSSファイルへの参照を追加します.
本教程では、「Profit loss statement」というエクセルテンプレートを導入することを例にしています.
今はSpread.Sheetsスクリプトを使ってこのファイルに他の収入行を追加できます.この操作を実行するためのボタンをページに追加します.
ミニ図を追加
今は他のデータ行に合わせてミニマップを追加できます.このようにするには、一連のセルを提供してデータとミニチュアの設定を取得する必要があります.この場合、私達は指定できます.•データを追加したばかりのセルの範囲•設定を同じ列の他のミニ図のように見せます.
重要なヒント:Chromeはセキュリティのためにローカルファイルを開けてはいけませんので、Firefoxなどのウェブブラウザを使ってこのコードを実行することができます.もちろん、ウェブサイトのURLからファイルを読み込むと、どのブラウザでも開くことができます.
Excelのリードコードを追加します.
私達はまた実現することができます.ウェブページでは、行機能を追加したSpread.SheetsをExcelファイルにエクスポートします.ここでは、Spread.Sheetsに内蔵されているクライアントエクセルIOコードを使います.
この を して、SpreadJSの テーブルコントロールをどのように するかを し、Excelデータをウェブページに し、ウェブページでデータ を った 、また な かのJavaScriptコードでExcelファイルに します.SpreadJS の サイトで、この を べて、Demoの をダウンロードすることができます. SpreadJS–エクセルIO では、SpreadJSの の だけを しています. ち、フロントエンドはExcelファイルを し、エクスポートします.データ 、 、PDFの 、カスタム など、より くの があります.SpreadJS サイトに って、より くのことを ってください.
一つの製品があれば、両方を完璧に融合させて、フロントエンドのテーブルのデータ処理、データの書き込み、データの可視化、オンライン文書などの分野で大いに異彩を放つことができます.SpreadJSは、このような機能レイアウトはExcelの高さと類似しており、大量のコード開発とテストを必要とせずにデータ展示、フロントエンドエクセル導入導出、グラフパネル、データバインディングなどの業務シーンの純粋な先端テーブルコントロールを実現することができます.
JavaScriptを使ってExcelの導入とエクスポートを実現します.
純粋なJavaScriptを通じて、Excelファイル機能の導入とエクスポートを完全に実現できます.そして、これらのファイルとI/O相互作用するインターフェースをエンドユーザーに提供します.本教程では、SpreadJSを利用して、JavaScriptで簡単にExcelファイルの導入とエクスポートの操作を実現し、またSpreadJSコンポーネントをHTMLページに追加することがどんなに簡単かを展示します.
仕事をよくしようとするなら,まず道具を研がなければならない.
JavaScriptの表計算ドキュメント項目を設定します.
新しいHTMLページを作成し、SpreadJSダウンロードパッケージのSpread.SheetsスクリプトとCSSファイルへの参照を追加します.
SpreadJS ExcelIO
その 、Spread.Sheetsコンポーネントを するページにスクリプトを し、div を してそれを む(SpreadJS コンポーネントはCanvasを して を するので、これは コンポーネントに なステップである):
$(document).ready(function () { var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); });
添加Excel导入代码
我们需要创建一个客户端ExcelIO组件的实例,并用它来实际打开 Excel 文件:
var excelIO = new GC.Spread.Excel.IO();
そして私たちはインポートファイルの関数を追加する必要があります.この例では、ローカルファイルを導入しますが、サーバ上のファイルに対して同じ操作ができます.サーバからファイルをインポートするには、その場所を参照する必要があります.以下は入力要素の例であり、ユーザはファイルの位置を入力することができる.
上記の手順を完了したら、直接にスクリプトコードにアクセスできます.var excelUrl = $("#importUrl").val();
以下の導入関数のコードはローカルファイルのみを「excerUrl」変数として使用します.function ImportFile() {
var excelUrl = "./test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType = 'blob';
oReq.onload = function () {
var blob = oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData = json;
workbook.fromJSON(json);
workbook.setActiveSheet("Revenues (Sales)");
}
サーバー上でもローカルでも参照ファイルは米ドル(document).ready関数内のスクリプトに以下の内容を追加する必要があります.$(document).ready(function () {
$.support.cors = true;
workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});
Excelファイルにデータを追加します.本教程では、「Profit loss statement」というエクセルテンプレートを導入することを例にしています.
今はSpread.Sheetsスクリプトを使ってこのファイルに他の収入行を追加できます.この操作を実行するためのボタンをページに追加します.
このボタンのclickイベントの関数を結合して、行を追加して前の行のスタイルをコピーすることができます.スタイルをコピーするには、copyTo関数を使って入力します.•原点と目標行の索引・行数と列数・スタイルのCopyToOptions値document.getElementById("addRevenue").onclick = function () {
var sheet = workbook.getActiveSheet();
sheet.addRows(11, 1);
sheet.copyTo(10, 1, 11, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);
}
データの追加とSparklineのための以下のスクリプトコードはすべてこのボタンでイベントハンドラをクリックします.ほとんどのデータに対して、私たちはsetValue関数を使うことができます.これにより、インデクス、列インデクス、値をSpreadのシートに設定することができます.sheet.set Value(11,1,「Reventue 8」).for (var c = 3; c < 15; c++) {
sheet.setValue(11, c, Math.floor(Math.random() * 200) + 10);
}
他の行にマッチするSUM式をP列に設定し、Q列のパーセンテージを設定します.sheet.setFormula(11, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(11, 16, 0.15);
最後に、copyTo関数を使って、前の行の数式をRからAD列の新しい行にコピーします.今回はCopyToOptions.formla:sheet.co pyTo(10,17,11,17,1,13,GC.Spread.Sheets.CopyToptions.formla)を使います.ミニ図を追加
今は他のデータ行に合わせてミニマップを追加できます.このようにするには、一連のセルを提供してデータとミニチュアの設定を取得する必要があります.この場合、私達は指定できます.•データを追加したばかりのセルの範囲•設定を同じ列の他のミニ図のように見せます.
var data = new GC.Spread.Sheets.Range(11, 3, 1, 12);
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor = "Text 2";
setting.options.lineWeight = 1;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.lowMarkerColor = "Text 2";
setting.options.highMarkerColor = "Text 1";
そして、私たちはset Sparklineのメソッドを呼び出して、指定します.•ミニ図の位置•データの位置•ミニ図の方向•ミニ図の種類•私たちが作成した設定sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);
コードを実行しようとしたら遅いかもしれません.データを変更するたびに、スタイルを追加するたびに、ブックが再描画されます.スピードと性能を大幅に向上させるために、Spread.Sheetsは絵画や計算サービスを一時停止する機能を提供しています.コードを通して行とデータを追加する前に両者を停止し、データのロードを完了したら回復します.workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();
このコードを追加すると、Webブラウザでページを開き、ExcelファイルをSpread.Sheetsにロードし、追加行の機能を実現することができます.重要なヒント:Chromeはセキュリティのためにローカルファイルを開けてはいけませんので、Firefoxなどのウェブブラウザを使ってこのコードを実行することができます.もちろん、ウェブサイトのURLからファイルを読み込むと、どのブラウザでも開くことができます.
Excelのリードコードを追加します.
私達はまた実現することができます.ウェブページでは、行機能を追加したSpread.SheetsをExcelファイルにエクスポートします.ここでは、Spread.Sheetsに内蔵されているクライアントエクセルIOコードを使います.
function ExportFile() {
var fileName = $("#exportFileName").val();
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = JSON.stringify(workbook.toJSON());
excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
if (e.errorCode === 1) {
alert(e.errorMessage);
}
});
}
このコードは、export FileNameの入力要素から直接に導出されたファイル名を取得する.私たちはそれを定義し、ユーザーにこのようにファイル名を付けることができます.
ここでは、この関数を呼び出してボタンを追加し続けます.
document.getElementById("export").onclick = function () {
ExportFile();
}
追加行機能を実現すると、「ファイルをエクスポート」ボタンでExcelをエクスポートできます.ファイルを自分のローカルに保存するために、FileSaver外部ライブラリを追加してください.
ファイルのエクスポートに したら、Excelを って いてもいいです.Excelで いているテンプレートは に した に、 しい「 」が されていることが かります.この を して、SpreadJSの テーブルコントロールをどのように するかを し、Excelデータをウェブページに し、ウェブページでデータ を った 、また な かのJavaScriptコードでExcelファイルに します.SpreadJS の サイトで、この を べて、Demoの をダウンロードすることができます.