Exporting html table to Google Spreadsheets using angularjs

Issue

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

Solution

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!

Answered By - Guy Sopher