下载弹出窗口中的内容

2024-04-06

下面是点击“打开窗口”时弹出窗口的 html 代码。我添加了下载按钮(在其中)。一旦用户单击它,就应该下载该表。我在这里缺少一些东西。谁能帮我?

我已经快到最后阶段了。唯一悬而未决的是下载内容

<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>


@用户11740857

您的代码已经可以工作,除了一个愚蠢的错误,那就是您放错了“openWindow1”函数的结束}。

当您将其放在“downloadCSV”函数之后时,这意味着“exportTableToCSV”和“downloadCSV”在函数“openWindow1”的范围内,并且不会在父窗口本身中定义,因此您不能使用“window” .opener”来访问该功能。

解决方案 1:(可能是最好的解决方案)

<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>

另一种选择是将这些函数定义为变量并将它们提供给打开的窗口。但上面的代码应该可以工作。

此外,我建议您使用突出显示代码缩进的 IDE,这样您就不会因为这个错误而感到沮丧!

Cheers

EDITED

抱歉,我没有看到它正在导出父表的内容。这是范围的问题。您需要定义函数才能访问新窗口的范围。这里是相关代码,您可以在其中看到我在新窗口中声明导出函数,并且我们将作用域窗口传递给第一个函数。这样您也可以在父窗口中使用该功能。

检查是否满足您的需求

<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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

下载弹出窗口中的内容 的相关文章

  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目?

    这是一个要测试的示例 https codesandbox io s j4vn761455 file src App vue 112 116 https codesandbox io s j4vn761455 file src App vue
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • 禁用整个站点的 IE8 加速器

    是的 我知道有类似的问题 https stackoverflow com questions 499565 is it possible to disable ie8 accelerators on my website在 SO 上 但它已
  • AngularJS - 服务、工厂、过滤器等中的依赖注入

    因此 我想在我的 Angular 应用程序中使用一些插件和库 目前 我只是引用这些函数 方法 因为它们是在 99 的应用程序中以完全忽略依赖注入的方式使用的 我有 例如 javascript 库 MomentJS 它处理格式化和验证日期 并
  • jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

    我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载 我还没有走多远 安装 jspm 后 并使用它来安装 jQuery jspm install jquery 以及基础知识 main
  • 自 2012 年 6 月 12 日以来,“未定义”随机附加在我网站上 1% 的请求网址中

    自 2012 年 6 月 12 日 11 20 TU 起 我在我的 varnish apache 日志中看到非常奇怪的错误 有时 当用户请求一页时 几秒钟后我会看到类似的请求 但 url 中最后一个 之后的所有字符串已被 未定义 替换 例子
  • 添加选项以选择框而不用 Internet Explorer 关闭该框?

    我正在尝试构建一个包含多个下拉选择框的网页 这些下拉选择框在首次打开时异步加载其选项 这在 Firefox 下工作得很好 但在 Internet Explorer 下则不然 下面是我想要实现的目标的一个小例子 基本上 有一个选择框 ID 为
  • 更改特定字符串的颜色

    有谁知道如果将特定单词输入文本区域 我如何更改它的颜色 例如 如果用户输入 你好我的朋友 它会动态地将 你好 更改为绿色 在google上花了很多时间 找不到任何相关的东西 谢谢 textareas 的设计目的不是选择性着色
  • 表单序列化javascript(无框架)

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We
  • selenium-webdriver 与 webdriverjs 有什么区别(以及何时使用)?

    我是一位使用 selenium webdriver 的经验丰富的专业人士 我正在探索有关如何测试 javascript 应用程序的更多选项 我发现了 webdriverJs 不幸的是 我不明白这两者 2 之间有什么区别 有人可以解释一下何时
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi
  • 在 Firefox 中使用 Javascript 检测键盘布局

    有没有办法在 Firefox 中检测客户端的键盘布局 我知道 Chrome 的答案是肯定的 请参阅https developer mozilla org en US docs Web API Navigator keyboard https
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网
  • 使用 QtWebEngine 将 C++ 对象暴露给 Qt 中的 Javascript

    使用 QtWebkit 可以通过以下方式将 C 对象公开给 JavascriptQWebFrame addToJavaScriptWindowObject如中所述https stackoverflow com a 20685002 5959
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将

随机推荐