Javascriptを使用して、スプレッドシートの「コピー」とブラウザのテーブルへの「貼り付け」を介して、Excel(またはGoogleスプレッドシート)から数値マトリックスデータを「受け入れる」ことができるHTMLテーブルを作成するにはどうすればよいですか。
4 に答える
これは IE でのみ確実に機能します。これは、Firefox (およびその他の可能性が高い) は、明示的に許可しない限りクリップボードへのアクセスを許可しないためです。最初にテキストエリアに貼り付けるという以前の提案は、これよりもうまくいくかもしれません。
スプレッドシートからコピーする場合、通常、セルはタブ (chr9) で区切られ、行は CR (chr13) で区切られます。このスクリプトは、クリップボードを 2D 配列に変換し、そこからテーブルを作成します。あまりエレガントではありませんが、Excel からデータをコピーすることはうまくいくようです。
<html>
<head>
<script language="javascript">
function clip() {
// get the clipboard text
var clipText = window.clipboardData.getData('Text');
// split into rows
clipRows = clipText.split(String.fromCharCode(13));
// split rows into columns
for (i=0; i<clipRows.length; i++) {
clipRows[i] = clipRows[i].split(String.fromCharCode(9));
}
// write out in a table
newTable = document.createElement("table")
newTable.border = 1;
for (i=0; i<clipRows.length - 1; i++) {
newRow = newTable.insertRow();
for (j=0; j<clipRows[i].length; j++) {
newCell = newRow.insertCell();
if (clipRows[i][j].length == 0) {
newCell.innerText = ' ';
}
else {
newCell.innerText = clipRows[i][j];
}
}
}
document.body.appendChild(newTable);
}
</script>
</head>
<body>
<input type="button" onclick="clip()">
</body>
</html>
これが私が作成したJavaScriptコードです(役立つ回答に基づいています)。私はJavaScriptを初めて使用するので、これを行うにはもっと良い方法があると確信していますが、うまくいくようです...目標は、スプレッドシートからテキスト領域に2列の数値データを「貼り付ける」ことです(私はExcel と Google スプレッドシートの両方を試しました)、浮動小数点ベクトル "xf" と "yf" を作成します。うまくいけば、誰かに役立ちます。批判歓迎…
これらがhtmlページに存在すると仮定しています...
<textarea id="psmtext" rows=24 cols=72> </textarea>
<input type="button" value="run code" onClick="psmtest();">
function psmtest(){
var psmtext = document.getElementById("psmtext");
var st = psmtext.value;
Ast = st.split("\n");
var numrows = Ast.length;
var ii;
var xs = [];
var ys = [];
for (ii = 0 ; ii < numrows ; ii++) {
// tab or comma deliminated data
if ( Ast[ii].split(",",2)[1] != null ){ ys[ii] = Ast[ii].split(",")[1]; xs[ii] = Ast[ii].split(",")[0];}
if ( Ast[ii].split("\t",2)[1] != null ){ ys[ii] = Ast[ii].split("\t")[1]; xs[ii] = Ast[ii].split("\t")[0];}
}
var xss = [];
var yss = [];
var numgoodrows = 0;
var iii =0;
for (ii = 0 ; ii < numrows ; ii++) {
if ( xs[ii] != null && ys[ii] != null) {
xss[iii] = xs[ii];
yss[iii] = ys[ii];
iii++;
}
}
numgoodrows = iii;
// next I need to convert to floating point array var xf = [], var yf = [];
var xf = [];
var yf = [];
for (ii = 0 ; ii < numgoodrows ; ii++) {
xf[ii] = parseFloat(xss[ii]);
yf[ii] = parseFloat(yss[ii]);
}
}
これを本当にうまくやるのは非常に難しいでしょう。
私の頭の上では、最善のアプローチは、ユーザー<textarea>
が貼り付けられる を提供することだと思います。次に、onchange イベント ハンドラーで、JS 解析を使用して行と列がどこに並んでいるかを特定し、HTML テーブルを作成して DOM に挿入します。
これは、比較的「正方形」のデータセットでは問題なく機能するはずです。結合された列/行と「ギザギザ」のデータでさらに問題が発生する可能性があります。
この質問はすでに回答済みと見なされていますが (古いものです)、最近はより良い解決策があることを指摘したいと思います。 jQuery Spreadsheet/Grid plugin with copy/paste from/to Excel を参照してください。warpech (この jQuery プラグインの作成者でもある)によって提案されたHandsOnTableのミニマリズムが特に気に入っています。プラグインはまだ非常によく維持されています。