Selecting iFrame Table to export as CSV

Question

I am trying to make a table generated in an iFrame downloadable in a CSV. I have made a JSFiddle (https://jsfiddle.net/22u6o6wu/3/) that can load the iFrame from Fusion Tables, however, I cannot get it to work. Here is the code that I am using:

This part deals with loading the url in an iFrame

function myFunction(myInput) {
var userInput = document.getElementById("myInput").value;

var Input = document.getElementById("demo").innerHTML = userInput;


if (userInput){

var startUrl = "https://fusiontables.google.com/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3+from+1XIDlbUpAJLcUtDf-cYoOZzpLi2KSN0ZH93sHJxVq+where+col3+%3D+'";


var endUrl = "'&containerId=googft-gviz-canvas";
var URL = startUrl+Input+endUrl;
document.getElementById("frame").innerHTML = '<iframe src="' + URL +
'" width="1000" height="720" scrolling="yes" border="0" sandbox="allow-same-origin allow-scripts" id="iframeId"></iframe>';
}

}

This is the CSV part

function download_csv(csv, filename) {
var csvFile;
var downloadLink;

// CSV FILE
csvFile = new Blob([csv], {type: "text/csv"});

// Download link
downloadLink = document.createElement("a");

// File name
downloadLink.download = filename;

// We have to create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);

// Make sure that the link is not displayed
downloadLink.style.display = "none";

// Add the link to your DOM
document.body.appendChild(downloadLink);

// Lanzamos
downloadLink.click();
}

function export_table_to_csv(html, filename) {
var csv = [];
    //var iframe = document.getElementById('googft-gviz-canvas').contentWindow.document.body.innerHTML;

 //var iframeDoc;
  // if (window.frames && window.frames.iframeId &&
  //  (iframeDoc = window.frames.iframeId.document)) {
  //  var iframeBody = iframeDoc.body;
  //  var ifromContent = iframeBody.innerHTML;
  // }

var rows = document.querySelectorAll("table tr");



for (var i = 0; i < rows.length; i++) {
    var row = [], cols = rows[i].querySelectorAll("td, th");

    for (var j = 0; j < cols.length; j++) 
        row.push(cols[j].innerText);

    csv.push(row.join(","));        
}

// Download CSV
download_csv(csv.join("\n"), filename);
}

 document.querySelector("button").addEventListener("click", function ()     {
var html = document.querySelector("table").outerHTML;
export_table_to_csv(html, "table.csv");
});

The CSV part was taken from: https://jsfiddle.net/gengns/j1jm2tjx/

So far I have tried the following methods:

document.getElementById('googft-gviz-canvas').contentWindow.document.body.innerHTML

And the top answer from: How to get the body's content of an iframe in Javascript?

However, I have been unable to implement these solutions.

In the inspector, I have been able to find the HTML for the table that is loaded, and the associated id's, I then tried to use these id's with the above methods, however, that still did not work. I would preferably like to stick with Javascript, as I do not have any experience with jQuery, and hence would not be able to modify, explain or fix the code.

Thanks.