如何在新弹出窗口中添加download按钮及对应下载功能script脚本

解决方案 #

核心问题说明 #

你当前的代码存在两个核心问题：

• 新弹出窗口内没有定义exportTableToCSV函数，点击按钮无法触发下载逻辑
• 按钮onclick属性的引号嵌套冲突，你用了单引号嵌套单引号，浏览器无法正确解析

修复后的完整代码 #

<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(`
    <script>
    // 表格转CSV并下载的核心函数
    function exportTableToCSV(filename) {
      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++) {
          // 处理内容里的逗号、引号，避免CSV格式错误
          var cellText = cols[j].innerText.replace(/"/g, '""');
          row.push('"' + cellText + '"');
        }
        csv.push(row.join(","));        
      }
      // 生成下载链接触发下载
      var csvFile = new Blob([csv.join("\\n")], {type: "text/csv"});
      var downloadLink = document.createElement("a");
      downloadLink.download = filename;
      downloadLink.href = window.URL.createObjectURL(csvFile);
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }
    <\/script>
    <button onclick='exportTableToCSV("members.csv")'>Export HTML Table To CSV File</button>
    <br><br>
    <table border=1>
      <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>
  `);
} 
</script>  

<button onclick="openWindow1()"> Open Window </button>   
</td> </tr>
</table>

修改点说明 #

• 直接把exportTableToCSV函数通过document.write注入到了新弹出的窗口内，不需要在父页面额外写跨窗口调用逻辑，兼容性更好
• 修复了按钮onclick的引号嵌套问题，外层用单引号，内层文件名用双引号，避免解析错误
• 导出函数里加了CSV格式转义逻辑，避免表格内容里有逗号、引号时导出的文件格式错乱

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