CODEWITHSUNDEEP
htmlcssexcel
ChristophMa
ChristophMa

Reputation: 139

How to make HTML table copy-paste-able to Excel

There are some very neat Excel like html spreadsheet options out there such as handsontable, but I am looking for something much simpler:

How can I change the html/css of a regular table, so that it can easily be copy pasted into Excel?

I am not looking for Excel file generator, I merely need my html table to be copy-paste-able.

Handsontable and wijmo flex sheet can do it, my question is: how do I need to enhance a regular html table to be able to do that too?

Upvotes: 8

Views: 13715

Answers (3)

GWorking
GWorking

Reputation: 4341

For me, when trying to implement @lingyfh solution, the \t had no effect, I needed the <tbody> part which is not in the code but you can see it (AFAIS) if you explore the formated html in the snippet

So in my case what has worked is (here with React)

                          <table>
                            {myarray.map(o => (
                              <tbody>
                                <tr>
                                  {o.secondArray[2].map(i => (
                                    <td>{i}</td>
                                  ))}
                                </tr>
                              </tbody>
                            ))}
                          </table>

I can copy paste to a Google sheet without problems, couldn't without tbody regardless of having a \t

Upvotes: 1

Jakub Hejnic
Jakub Hejnic

Reputation: 31

Example for google drive excel: this key word is '\t'

For me this worked. But I had to paste data from browser (Google Chrome) to Notepad and then copy them from Notepad to Excel.

Direct copying from Chrome to excel resulted in all data pasted in one cell.

Upvotes: 3

lingyfh
lingyfh

Reputation: 1383

you need attention platform compatibillity.

Example for google drive excel: this key word is '\t'

var date = ['2017-01-01', '2017-01-02', '2017-01-03', '2017-01-04'];
var data = ['1', '2', '3', '4'];
var element = window.document.getElementById('table_data');
element.innerHTML = element.innerHTML + '<tr><th>date</th><th>count</th></tr>';
for (var i = 0; i < date.length; i++) {
    element.innerHTML = element.innerHTML + '<tr><td>' + date[i] + '\t' + '</td><td>' + date[i] + '\t' + '</td></tr>';
}
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: center;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
<table id='table_data'>

</table>

Upvotes: 1

Related Questions