Question

我正在尝试在以CSV格式下载的iFrame中生成一个表格。我已经制作了一个可以从Fusion Tables加载iFrame的JSFiddle（https://jsfiddle.net/22u6o6wu/3/），但是，我无法让它工作。这是我正在使用的代码：

这部分涉及在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&amp;t=TABLE&amp;q=select+col0%2C+col1%2C+col2%2C+col3+from+1XIDlbUpAJLcUtDf-cYoOZzpLi2KSN0ZH93sHJxVq+where+col3+%3D+'";


var endUrl = "'&amp;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>';
}

}

这是CSV部分

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");
});

CSV部分取自：https://jsfiddle.net/gengns/j1jm2tjx/

到目前为止，我尝试了以下方法：

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

最佳答案来自：How to get the body's content of an iframe in Javascript?

但是，我无法实施这些解决方案。

在检查器中，我能够找到已加载的表的HTML以及相关的ID，然后我尝试使用这些id以上的方法，但是，仍然没有奏效。我最好坚持使用Javascript，因为我没有任何jQuery经验，因此无法修改，解释或修复代码。

感谢。

选择iFrame表以导出为CSV

0 个答案: