下载弹出窗口中的内容 [英] Download the contents in the pop up window
问题描述
以下是点击打开窗口"时弹出窗口的 html 代码.我添加了下载按钮(在这个里面).一旦用户点击它，表格应该被下载.我在这里遗漏了一些东西.有人可以帮我吗?
Below is the html code that has a pop up window when you click on "open window". I have added the download button (inside this). Once the user clicks on it, The table should be downloaded. I am missing something here. Can anyone help me?
我快到最后阶段了.唯一悬而未决的是下载内容
I am almost in the final stage. Only thing pending is to have the contents downloaded
<table border=1>
<tr>
<th> </th>
<th> sub_domain </th>
<th> nReviews </th>
<th> Ratings_e </th>
<th> Text_e </th>
<th> rn </th>
<th> launcher_html </th>
</tr>
<tr>
<td align=\"right\"> 1 </td>
<td> a1 </td> <td align=\"right\"> 2 </td>
<td> 1, 2 </td>
<td> asd, dfdsf </td>
<td align="left"> 1 </td>
<td> <script>
function openWindow1() { var newtab1 = window.open("", "anotherWindow", "width=300,height=150");
newtab1.document.open();
newtab1.document.write('<table border=1> <button onclick="window.opener.exportTableToCSV(\'members.csv\');">Export HTML Table To CSV File</button><br></br><tr><th>Ratings_e</th><th>Text_e</th></tr><tr><td>1</td><td>asd</td></tr><tr><td> 2</td><td> dfdsf</td></tr></table>');
function exportTableToCSV(filename) {
alert("I am an alert box!");
var csv = [];
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 file
alert('Hey')
downloadCSV(csv.join("\n"), filename);
}
function downloadCSV(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;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
}
</script>
<button onclick="openWindow1()"> Open Window </button>
</td> </tr> </table>
推荐答案
@user11740857
@user11740857
你的代码已经可以工作了，除了一个愚蠢的错误，那就是你放错了openWindow1"的结束 } ；功能.
Your code already works, except from one silly mistake, that is that you misplaced the closing } of "openWindow1" function.
当你把它放在downloadCSV"之后函数，这意味着exportTableToCSV"和下载CSV"在函数openWindow1"的范围内并且不会在父窗口本身中定义，因此您不能使用window.opener"；访问该功能.
As you placed it after "downloadCSV" function, it means that "exportTableToCSV" and "downloadCSV" are in the scope of the function "openWindow1" and won't be defined in the parent window itself, so you can't use "window.opener" to acces that functions.
解决方案 1:(可能也是最好的一个)
Solution 1: (and probably the best one)
<table border=1>
<tr>
<th></th>
<th> sub_domain</th>
<th> nReviews</th>
<th> Ratings_e</th>
<th> Text_e</th>
<th> rn</th>
<th> launcher_html</th>
</tr>
<tr>
<td align=\"right\"> 1</td>
<td> a1</td>
<td align=\"right\"> 2</td>
<td> 1, 2</td>
<td> asd, dfdsf</td>
<td align="left"> 1</td>
<td>
<script>
function openWindow1() {
var newtab1 = window.open("", "anotherWindow", "width=300,height=150");
newtab1.document.open();
newtab1.document.write('<table border=1> <button onclick="window.opener.exportTableToCSV(\'members.csv\');">Export HTML Table To CSV File</button><br></br><tr><th>Ratings_e</th><th>Text_e</th></tr><tr><td>1</td><td>asd</td></tr><tr><td> 2</td><td> dfdsf</td></tr></table>');
}
function exportTableToCSV(filename) {
alert("I am an alert box!");
var csv = [];
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 file
alert('Hey')
downloadCSV(csv.join("\n"), filename);
}
function downloadCSV(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;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
</script>
<button onclick="openWindow1()"> Open Window</button>
</td>
</tr>
</table>另一个选项是将这些函数定义为变量并将它们提供给打开的窗口.但是上面的代码应该可以工作.
The other option is to define those functions as variables and give them to the opened window. But the code above should work.
此外，我建议您使用可以突出显示代码缩进的 IDE，这样您就不会因为出现这些错误而感到沮丧！
Moreover, I'd suggest you to use an IDE that hightlights your code indentation, so you don't get frustrated but this mistakes!
干杯
已编辑
抱歉，我没有看到它正在导出父表的内容.这是范围的问题.您需要定义函数以访问新窗口的范围.在这里，您可以看到代码，在其中您可以看到我在新窗口中声明了导出函数，并且我们正在将作用域窗口传递给第一个函数.这样您也可以在父窗口中使用该功能.
Sorry, I didn't see that it was being exported the content of the parent table. This is a problem with the scopes. You need to define the functions so as to access the scope of the new window. Here you go the code for that, in which you can see that I'm declaring the exporting functions at the new window, and that we are passing the scope window to the first function. This is so you can use that functions in the partent window too.
检查是否满足您的需求
<table border=1>
<tr>
<th></th>
<th> sub_domain</th>
<th> nReviews</th>
<th> Ratings_e</th>
<th> Text_e</th>
<th> rn</th>
<th> launcher_html</th>
</tr>
<tr>
<td align=\"right\"> 1</td>
<td> a1</td>
<td align=\"right\"> 2</td>
<td> 1, 2</td>
<td> asd, dfdsf</td>
<td align="left"> 1</td>
<td>
<script>
function openWindow1() {
var newtab1 = window.open("", "anotherWindow", "width=300,height=150");
newtab1.document.open();
newtab1.document.write('<table border=1> <button onclick="exportTableToCSV(window,\'members.csv\');">Export HTML Table To CSV File</button><br></br><tr><th>Ratings_e</th><th>Text_e</th></tr><tr><td>1</td><td>asd</td></tr><tr><td> 2</td><td> dfdsf</td></tr></table>');
newtab1.exportTableToCSV = exportTableToCSV;
newtab1.downloadCSV = downloadCSV;
}
function exportTableToCSV(scopedWindow,filename) {
alert("I am an alert box!");
var csv = [];
var rows = scopedWindow.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 file
alert('Hey')
scopedWindow.downloadCSV(csv.join("\n"), filename);
}
function downloadCSV(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;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
</script>
<button onclick="openWindow1()"> Open Window</button>
</td>
</tr>
</table>干杯 x2
这篇关于下载弹出窗口中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
