web-dev-qa-db-ja.com

ExcelからWebページへのコピー/貼り付け

スプレッドシートからWebフォームにコピーして貼り付ける標準的な方法またはライブラリはありますか？ Excelから複数のセルを選択すると、（明らかに）区切り文字が失われ、すべてがWebフォームの1つのセルに貼り付けられます。 VBで行う必要がありますか？または、Webフォームで貼り付けアクションが開始されたら処理を実行できますか？

javascripthtmlformsexcel
78
His dudeness

区切り文字は失われません。セルはタブ（\t）および改行による行（\n）フォームに表示されない場合があります。自分で試してください：Excelからメモ帳にコンテンツをコピーすると、セルがきれいに並んでいるのがわかります。タブでフィールドを分割し、それらを別のものに置き換えるのは簡単です。この方法で、それらからテーブルを構築することもできます。 jQueryを使用した例を次に示します。

var data = $('input[name=Excel_data]').val();
var rows = data.split("\n");

var table = $('<table />');

for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

// Insert into DOM
$('#Excel_table').html(table);

したがって、本質的に、このスクリプトは貼り付けられたExcelデータからHTMLテーブルを作成します。

80
Tatu Ulmanen

Tatuの回答に応えて、彼のソリューションを紹介するための簡単なjsFiddleを作成しました。

http://jsfiddle.net/duwood/sTX7y/

HTML

<p>Paste Excel data here:</p>  
<textarea name="Excel_data" style="width:250px;height:150px;"></textarea><br>
<input type="button" onclick="javascript:generateTable()" value="Genereate Table"/>
<br><br>
    <p>Table data will appear below</p>
<hr>
<div id="Excel_table"></div>

JS

function generateTable() {
    var data = $('textarea[name=Excel_data]').val();
    console.log(data);
    var rows = data.split("\n");

    var table = $('<table />');

    for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

// Insert into DOM
$('#Excel_table').html(table);
}
23
dunderwood

Tatuと同じアイデア（プロジェクトで間もなく必要になります）、ただし正規表現を使用しています。
大規模なデータセットの場合、どちらが速いかもしれません。

<html>
<head>
    <title>excelToTable</title>
    <script src="../libs/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <textarea>a1    a2  a3
b1  b2  b3</textarea>
    <div></div>
    <input type="button" onclick="convert()" value="convert"/>
    <script>
        function convert(){
            var xl = $('textarea').val();
            $('div').html( 
                '<table><tr><td>' + 
                xl.replace(/\n+$/i, '').replace(/\n/g, '</tr><tr><td>').replace(/\t/g, '</td><td>') + 
                '</tr></table>'
            )
        }
    </script>
</body>
</html>
8
Mic

[〜＃〜] osx [〜＃〜] および Windows には、さまざまなタイプのコンテンツ用の複数のタイプのクリップボードがあります。 Excelでコンテンツをコピーすると、データはプレーンテキストとHTMLクリップボードに保存されます。

正しい方法（区切り文字の問題でつまずかない）は、HTMLを解析することです。 http://jsbin.com/uwuvan/5 は、HTMLクリップボードを取得する方法を示す簡単なデモです。キーは、onpasteイベントにバインドして読み取ることです

event.clipboardData.getData('text/html')
8
SheetJS

私のようにここで終わる将来のグーグルのために、@ tatu Ulmanenの概念を使用して、それをオブジェクトの配列に変えました。この単純な関数は、貼り付けられたExcel（またはGoogleシート）データの文字列（できればtextareaから）を取り、オブジェクトの配列に変換します。列/プロパティ名に最初の行を使用します。

function excelToObjects(stringData){
    var objects = [];
    //split into rows
    var rows = stringData.split('\n');

    //Make columns
    columns = rows[0].split('\t');

    //Note how we start at rowNr = 1, because 0 is the column row
    for (var rowNr = 1; rowNr < rows.length; rowNr++) {
        var o = {};
        var data = rows[rowNr].split('\t');

        //Loop through all the data
        for (var cellNr = 0; cellNr < data.length; cellNr++) {
            o[columns[cellNr]] = data[cellNr];
        }

        objects.Push(o);
    }

    return objects;
}

うまくいけば、それは将来誰かを助ける。

5
Coo

更新：これは、MS Excelの代わりにONLYOFFICEを使用する場合にのみ当てはまります。

実際に、ここで提供されるすべての回答と受け入れられた回答の両方にフローがあります。フローは、Excelに空のセルがあり、それをコピーすると、クリップボードに2つのタブ文字が隣り合うので、分割後、配列に1つの追加項目を取得し、その行に追加のセルとして表示されます他のすべてのセルを1つずつ移動します。そのため、基本的には、文字列内のすべてのダブルタブ（隣り合うタブのみ）文字を1つのタブ文字に置き換えてから分割する必要があります。

@userfuserのjsfiddleの更新バージョンは、removeExtraTabsで貼り付けられたデータをフィルタリングすることにより、この問題を解決するためにここにあります

http://jsfiddle.net/sTX7y/794/

function removeExtraTabs(string) {
  return string.replace(new RegExp("\t\t", 'g'), "\t");
}

function generateTable() {
  var data = removeExtraTabs($('#pastein').val());
  var rows = data.split("\n");
  var table = $('<table />');

  for (var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for (var x in cells) {
      row.append('<td>' + cells[x] + '</td>');
    }
    table.append(row);
  }

  // Insert into DOM
  $('#Excel_table').html(table);
}

$(document).ready(function() {
  $('#pastein').on('paste', function(event) {
    $('#pastein').on('input', function() {
      generateTable();
      $('#pastein').off('input');
    })
  })
})
1
Aram

Excel 2007には、[データ]タブでこれを行うための機能があり、非常にうまく機能します。

0
LeWoody

将来誰かがそれに出くわした場合に備えて、これを掘り下げてください。上記のコードを意図したとおりに使用しましたが、データベースに送信された後にテーブルを表示する問題に遭遇しました。 PHPを使用してクエリ内の新しい行とタブを置換します。送信時に置換を実行できます。$ _ POST [request]が名前になります。あなたのテキストエリアの：

$postrequest = trim($_POST[request]);
$dirty = array("\n", "\t");
$clean = array('</tr><tr><td>', '</td><td>');
$request = str_replace($dirty, $clean, $postrequest);

データベースに$ requestを挿入するだけで、HTMLテーブルとして保存されます。

0
dcclassics

たぶん、PHPからExcelファイルを読み込んでから、DBに保存するか、何らかの処理を行う方が良いでしょう。

ここでは、PHPでExcelデータを読み書きする方法に関する詳細なチュートリアルを示します。
http://www.ibm.com/developerworks/opensource/library/os-phpexcel/index.html

0
Adnan