Загрузите содержимое во всплывающем окне

ProgramBox

Загрузите содержимое во всплывающем окне

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#javascript #html

Вопрос:

Ниже приведен 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>

Ответ №1:

@пользователь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, которая высвечивает отступы в вашем коде, чтобы вы не расстраивались, но это ошибка!

Овации

отредактированный

Извините, я не видел, чтобы экспортировалось содержимое родительской таблицы. Это проблема с областями видимости. Вам необходимо определить функции, чтобы получить доступ к области действия нового окна. Вот код для этого, в котором вы можете видеть, что я объявляю функции экспорта в новом окне и что мы передаем окно области в первую функцию. Это делается для того, чтобы вы также могли использовать эти функции в окне partent.

Проверьте, соответствует ли это вашим потребностям

 <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

1. Привет, Спасибо. но на самом деле я иду этим путем. Прямо сейчас он загружает первую таблицу (за пределами одной). Но мне нужно загрузить таблицу, которая есть во всплывающем окне

2. Смогли ли вы понять мою точку зрения 🙂 Ваш код верен, если я хочу загрузить вне таблицы, но он не будет загружаться внутри таблицы

3. Привет! Я отредактировал ответ, чтобы исправить эту проблему, я не заметил этого, извините. Там все, что нам нужно сделать, это предоставить функции окно области действия, чтобы она знала, какой документ использовать

4. Привет, Рубен, я думаю, мы можем объявлять функции внутри скрипта в любом месте, верно?. Также я попытался добавить еще одну строку в таблицы (первая таблица). Теперь кнопка загрузки не работает. Не уверен. Должны ли мы объявить идентификатор. У меня есть код здесь. Не могли бы вы мне помочь, пожалуйста

5. Привет! Да, вы можете объявить функции в глобальной области, и, вероятно, так и должно быть, потому что они будут использоваться глобально. В примере, который вы привели в качестве ответа, он, кажется, работает правильно, в чем дело?

Ответ №2:

Для 2 рядов

 <script>

                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(""), 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>


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




            </script>


            <button onclick="openWindow1()"> Open Window</button>
        </td>
    </tr>
        <tr>
        <td align="right"> 1</td>
        <td> a1</td>
        <td align="right"> 2</td>
        <td> 2, 2</td>
        <td> asd1, dfdsf1</td>

        <td align="left"> 1</td>
        <td>
            <script>

                function openWindow2() {
                    var newtab2 = window.open("", "anotherWindow", "width=300,height=150");
                    newtab2.document.open();

                    newtab2.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>2</td><td>asd1</td></tr><tr><td> 2</td><td> dfdsf1</td></tr></table>');
                    newtab2.exportTableToCSV = exportTableToCSV;
                    newtab2.downloadCSV = downloadCSV;
                }




            </script>


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

1. Есть ли причина писать две функции открытого окна для нескольких строк? Кроме того, в открывшемся окне кнопка загрузки помещается как прямой дочерний элемент элемента таблицы, что не является допустимым HTML

2. Ты хочешь сказать. 2 открытые окна не требуются. Не могли бы вы, пожалуйста, попытаться помочь мне здесь

3. Этот пост в первую очередь посвящен тому, как разрешить пользователю загружать данные из открытого окна. Опубликованный код помещает код для открытия дочернего окна в ячейку данных. Чтобы обобщить это, вы должны поместить скрипт за пределы таблицы (один раз) и иметь кнопку в каждой строке (родительской таблицы), передающую строку, которая находится в функции открытия окна, в качестве аргумента. Таким образом, функция открытия окна может генерировать таблицу дочернего окна из данных в строке, кнопка загрузки которой была нажата. Мой комментарий был о том, чтобы не кодировать вручную несколько функций, которые, по сути, делали одно и то же.

Ответ №3:

Таблицы данных Jquery

 <script src="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css"></script>
<script src="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>
<table id="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>

Ответ №4:

Я не уверен, каковы требования к вашему проекту. но если вы хотите загрузить полную таблицу. Я бы предпочел использовать Jquery Datatables . В таблицах данных Jquery есть встроенная функция загрузки таблицы в формате PDF, EXCEL, CSV, также вы можете распечатать ее. вам не нужно писать такие длинные коды. Кроме того, код очень прост в написании и понимании. Взгляните на приведенный ниже пример.

 $(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

Для дальнейшего анализа Читайте Здесь

Пожалуйста, проголосуйте, если этот ответ поможет.

1. Спасибо. Но где я должен поместить это в код? Не могли бы вы, пожалуйста, помочь мне?

2. Что вам нужно сделать, так это назначить идентификатор таблице в модальном режиме. затем перейдите по указанной ссылке в ответе, вы найдете несколько ссылок CDN, которые необходимы для таблиц данных для экспорта данных. разместите их в глобальном footer.php. Поместите предоставленный код в свой глобальный файл javascript ИЛИ на ту же страницу php, на которую добавлен модал.

3. Привет, Асад, я только что попробовал твой подход с примером ниже. Вы можете это увидеть, пожалуйста

4. не могли бы вы поделиться ссылкой @user11740857

5. Только что добавлено выше. Заголовок «Таблицы данных Jquery»

Метки: Загрузите содержимое во всплывающем окне