'Exporting html table to Google Spreadsheets using angularjs

I have created an application for managing inventory using angularjs and node. Now I want to add export functionality to specific screens. I would rather exporting the data to a new Google Spreadsheet (instead of microsoft Excel), but I couldn't find a way to do that...

I have my data converted to a simple html table, and I've managed downloading an xls file of it, but it has many problems (encoding, displaying images in cells etc.) so I'd really rather exporting it to Google Spreadsheet.

Does anyone know about a simple way to export html tables to a Google Spreadsheet? I refuse to believe it is impossible...

Thanks

htmlnode.jsangularjsgoogle-sheets


Solution 1:[1]

Finally, I found a simple (and actually very effective) solution around this issue.

I'm using ZeroClipboard to copy the table into the user's clipboard, then I'm opening a new Google Spreadsheet. All the user needs to do is to click Ctrl-V and paste the table.

Here is the code:

HTML

<a ng-repeat="exportBtn in exportTables" class="btn btn-default" href="" clip-copy="getHtmlToCopy(exportBtn.target)" clip-copy-mime-type="text/plain">Copy {{exportBtn.name}} </a>

open a new Google Spreadsheet

JS

 $rootScope.getHtmlToCopy = function (target) {
        var copyConst = {rowSeperator: "\r\n", colSeperator: "\t"}

        function $chk(obj) {
          return !!(obj || obj === 0)
        }

        var TableUtil = {
          nodeToString: function (table, rowSeperator, colSeperator) {
            var d = "";
            if (table.childNodes.length) {
              if ("TD" == table.nodeName || "TH" == table.nodeName)colSeperator = rowSeperator = "";
              for (table = table.firstChild; table;) {
                d += TableUtil.nodeToString(table, rowSeperator, colSeperator);
                if ("TR" == table.nodeName)d += rowSeperator; else if ("TD" == table.nodeName || "TH" == table.nodeName)d += colSeperator;
                table = table.nextSibling
              }
            } else"#text" == table.nodeName && $chk(table.nodeValue) && "" !== table.nodeValue && (rowSeperator = table.nodeValue, colSeperator = RegExp("\\t", "g"), rowSeperator = rowSeperator.replace(RegExp("\\n", "g"), ""), rowSeperator = rowSeperator.replace(colSeperator, ""), d += rowSeperator.trim());
            return d
          }
        }

        var res = TableUtil.nodeToString($('table#' + target)[0], copyConst.rowSeperator, copyConst.colSeperator)

        console.log('got html to copy', res);

        //the following line might cause a popup blocker to stop the new tab. you can show a button after the copy is finished that will open a new tab
        window.open("http://spreadsheets.google.com/ccc?new");

        return (res);
      }

It's ugly but its working perfectly!

Solution 2:[2]

excel uses OOXML format. There is lot of details out there. Essentially, its a zip file of mutiple xml and xsl files. google spreadsheet, however, does not have many open specs.

I suggest you start with OOXML first

Solution 3:[3]

The simplest way to get data into a Google spreadsheet is to save it in CSV format and then upload that to Google Drive, specifying convert=true. See https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCEQFjAA&url=https%3A%2F%2Fsupport.google.com%2Fdocs%2Fanswer%2F40608%3Fhl%3Den&ei=mTprVYalNoPbsATm4IDQDA&usg=AFQjCNGKRxQaUQ5xQnkQRHIq5cd2YQn7ZA&sig2=vuJhRhgHp1FhwX8X0teMJw&bvm=bv.94455598,d.ZGU

Solution 4:[4]

Use 

=ImportHtml(URL, "table", num)

to import any html table into a google spreadsheet

A simple guide here https://eagereyes.org/data/scrape-tables-using-google-docs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rubén
Solution 2 Qiaosen Huang
Solution 3 pinoyyid
Solution 4 72GM

Related Questions