Download The Contents In The Pop Up Window
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 dow
Solution 1:
@user11740857
Your code already works, except from one silly mistake, that is that you misplaced the closing } of "openWindow1" function.
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.
Solution 1: (and probably the best one)
<tableborder=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><tdalign=\"right\"> 1</td><td> a1</td><tdalign=\"right\"> 2</td><td> 1, 2</td><td> asd, dfdsf</td><tdalign="left"> 1</td><td><script>functionopenWindow1() {
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>');
}
functionexportTableToCSV(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 filealert('Hey')
downloadCSV(csv.join("\n"), filename);
}
functiondownloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// CSV file
csvFile = newBlob([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 DOMdocument.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
</script><buttononclick="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.
Moreover, I'd suggest you to use an IDE that hightlights your code indentation, so you don't get frustrated but this mistakes!
Cheers
EDITED
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.
Check if that meets your need
<tableborder=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><tdalign=\"right\"> 1</td><td> a1</td><tdalign=\"right\"> 2</td><td> 1, 2</td><td> asd, dfdsf</td><tdalign="left"> 1</td><td><script>functionopenWindow1() {
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;
}
functionexportTableToCSV(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 filealert('Hey')
scopedWindow.downloadCSV(csv.join("\n"), filename);
}
functiondownloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// CSV file
csvFile = newBlob([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 DOMdocument.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
</script><buttononclick="openWindow1()"> Open Window</button></td></tr></table>Cheers x2
Solution 2:
For 2 rows
<script>functionexportTableToCSV(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 filealert('Hey')
scopedWindow.downloadCSV(csv.join(""), filename);
}
functiondownloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// CSV file
csvFile = newBlob([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 DOMdocument.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
</script><tableborder=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><tdalign=\"right\"> 1</td><td> a1</td><tdalign=\"right\"> 2</td><td> 1, 2</td><td> asd, dfdsf</td><tdalign="left"> 1</td><td><script>
function openWindow1() {
var newtab1 = window.open("", "anotherWindow", "width=300,height=150");
newtab1.document.open();
newtab1.document.write('<tableborder=1><buttononclick="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;
}
</script><buttononclick="openWindow1()"> Open Window</button></td></tr><tr><tdalign=\"right\"> 1</td><td> a1</td><tdalign=\"right\"> 2</td><td> 2, 2</td><td> asd1, dfdsf1</td><tdalign="left"> 1</td><td><script>
function openWindow2() {
var newtab2 = window.open("", "anotherWindow", "width=300,height=150");
newtab2.document.open();
newtab2.document.write('<tableborder=1><buttononclick="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>2</td><td>asd1</td></tr><tr><td> 2</td><td> dfdsf1</td></tr></table>');
newtab2.exportTableToCSV = exportTableToCSV;
newtab2.downloadCSV = downloadCSV;
}
</script><buttononclick="openWindow2()"> Open Window</button></td></tr></table>Solution 3:
Jquery Datatables
<scriptsrc="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css"></script><scriptsrc="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"></script><script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script><tableid="example"class="display nowrap"style="width:100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr></thead><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr><tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$86,000</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,700</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>$372,000</td></tr><tr><td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>$137,500</td></tr><tr><td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>$327,900</td></tr><tr><td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><td>2009/09/15</td><td>$205,500</td></tr></table>Solution 4:
I am not sure whether what are the requirements for your project. but if you want to download the complete table. I would prefer to use Jquery Datatables. The Jquery Datatables has a built-in function to download table in PDF, EXCEL, CSV, also you can print it. you donot need to write such long codes. Additionally, the code is super simple to write and understand. Have a look at the example below.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
For further analysis Read Here
Please Vote if this answer help.
Post a Comment for "Download The Contents In The Pop Up Window"