点击按钮打开弹窗后无法下载弹窗内表格的前端开发问题求助

核心问题点 #

• 函数作用域错误：exportTableToCSV、downloadCSV两个函数定义在openWindow1函数内部，属于局部函数，未挂载到父页面全局window对象，弹窗调用window.opener.exportTableToCSV时无法找到对应方法
• 文档上下文错误：exportTableToCSV中默认使用父页面document查询节点，无法获取弹窗内的表格内容
• 弹窗文档流未关闭：执行newtab1.document.write后未调用newtab1.document.close()，可能导致页面状态异常

修复后完整代码 #

<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 exportTableToCSV(filename, doc) {
    alert("I am an alert box!");
    var csv = [];
    // 用传入的弹窗文档对象查询节点
    var rows = doc.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();
    // 用完移除冗余dom节点
    document.body.removeChild(downloadLink);
}

function openWindow1() {     
    var newtab1 = window.open("", "anotherWindow", "width=300,height=150");  
    newtab1.document.open();  
    // 点击按钮时把弹窗的document对象传给父页面方法
    newtab1.document.write('<table border=1> <button onclick="window.opener.exportTableToCSV(\'members.csv\', document);">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.document.close();
}
</script>  
<button onclick="openWindow1()"> Open Window </button>  
</td> </tr>   </table>

内容的提问来源于stack exchange，提问作者user11740857