Экспорт html со скрытыми строками с использованием Jquery - PullRequest
Новая
       0

Экспорт html со скрытыми строками с использованием Jquery

0 голосов
/ 18 июня 2020

В моем проекте есть следующий фрагмент кода, и мне нужно экспортировать все строки (также скрытые) в этой таблице. Имеется разбиение на страницы с использованием angularjs и 10 строк на страницу, а все остальные строки скрываются с помощью style = "display: none" 

<html>
<table id="tableexport">
<tbody>
<tr ng-repeat="r in FilteredGrid" class="ng-scope">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="12#0##Mohit#Mathew">
                            </td>
                            <td>11 </td>
                            <td>12</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Mohit</td>
                            <td>Mathew</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td></td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope">

                            <td width="35px" style="text-align:center" >
                                <input width="15" type="checkbox" class="toggle" id="12244#0##ffds#test">
                            </td>
                            <td>12 </td>
                            <td>12244</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>ffds</td>
                            <td>test</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>Incomplete</td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="123454#0##paultest#swabytest">
                            </td>
                            <td>15 </td>
                            <td>123454</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>paultest</td>
                            <td>swabytest</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>Incomplete</td>
                            <td>Champion </td>
                            <td></td>
                        </tr>
                            <tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="AAAAA1#0##Sally#Smith">
                            </td>
                            <td>31 </td>
                            <td>AAAAA1</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Sally</td>
                            <td>Smith</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>SDD</td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="AAAAA2#0##Jason#Jones">
                            </td>
                            <td>32 </td>
                            <td>AAAAA2</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Jason</td>
                            <td>Jones</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>SDD</td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center" ng-class="{'red':r.AvlBalance.toFixed(2)<0}">
                                <input width="15" type="checkbox" class="toggle" id="BG8XW14THT#0##tes#">
                            </td>
                            <td>33 </td>
                            <td>BG8XW14THT</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>tes</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>KYC Pending Verification </td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center" >
                                <input width="15" type="checkbox" class="toggle" id="FD67D9X1YH#0##Jim#Corbett">
                            </td>
                            <td>34 </td>
                            <td>FD67D9X1YH</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Jim</td>
                            <td>Corbett</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>Incomplete</td>
                            <td>Champion</td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="few154#0##Stanley#Raddford">
                            </td>
                            <td">35 </td>
                            <td">few154</td>
                            <td">NA</td>
                            <td"></td>
                            <td">0.00</td>
                            <td">Stanley</td>
                            <td">Raddford</td>
                            <td"></td>
                            <td"></td>
                            <td">0</td>
                            <td">Client Verified</td>
                            <td">Champion </td>
                            <td"></td>
                        </tr>
                        </tbody>
</table>
                        </html>

и javascript код для экспорта 

$('#export').click(function (e) {   
    let uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="https://www.w3.org/TR/html401/"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>',
        base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
        format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

    let table =  document.getElementById(tableexport)
    if (!table) {
        return;
    }
    let ctx = {
        worksheet: 'CardDetailsGrid' || 'Worksheet', table: table.innerHtml }
    var str = base64(format(template, ctx));
    var blob = b64toBlob(str, "application/vnd.ms-excel");
    var blobUrl = URL.createObjectURL(blob);

    let link = document.createElement('a');
    link.download = 'Collective Administration.xls'; // the fileName for download
    link.href = blobUrl;
    link.click();
    // window.location = blobUrl; // instead of using a link, could also do this;

    function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }

Экспортируются только строки, показанные на странице html.

1 Ответ

0 голосов
/ 23 июня 2020

Вы можете сделать это, создав копию таблицы, которая будет редактироваться на лету. Я соответствующим образом изменил код. 

$('#export').click(function (e) {
    let uri = 'data:application/vnd.ms-excel;base64,',
    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="https://www.w3.org/TR/html401/"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>',
    base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
    format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

    // get a copy of table to modify without affecting original
    let tableCopy =  document.getElementById('tableexport').cloneNode(true);
    let rows = tableCopy.querySelectorAll('tr');
    
    rows.forEach(function(row) {
      row.style.display = '';
    });
    
    if (!tableCopy) {
        return;
    }
    let ctx = {
        worksheet: 'CardDetailsGrid' || 'Worksheet', table: tableCopy.innerHTML // typo its innerHTML not innerHtml
    }
    var str = base64(format(template, ctx));
    var blob = b64toBlob(str, "application/vnd.ms-excel");
    var blobUrl = URL.createObjectURL(blob);

    let link = document.createElement('a');
    link.download = 'Collective Administration.xls'; // the fileName for download
    link.href = blobUrl;
    link.click();
    // window.location = blobUrl; // instead of using a link, could also do this;
    
    function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);
            byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
    }
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<button id="export">export</button>
<hr />

<table id="tableexport">
<tbody>
<tr ng-repeat="r in FilteredGrid" class="ng-scope">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="12#0##Mohit#Mathew">
                            </td>
                            <td>11 </td>
                            <td>12</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Mohit</td>
                            <td>Mathew</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td></td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope">

                            <td width="35px" style="text-align:center" >
                                <input width="15" type="checkbox" class="toggle" id="12244#0##ffds#test">
                            </td>
                            <td>12 </td>
                            <td>12244</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>ffds</td>
                            <td>test</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>Incomplete</td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="123454#0##paultest#swabytest">
                            </td>
                            <td>15 </td>
                            <td>123454</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>paultest</td>
                            <td>swabytest</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>Incomplete</td>
                            <td>Champion </td>
                            <td></td>
                        </tr>
                            <tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="AAAAA1#0##Sally#Smith">
                            </td>
                            <td>31 </td>
                            <td>AAAAA1</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Sally</td>
                            <td>Smith</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>SDD</td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="AAAAA2#0##Jason#Jones">
                            </td>
                            <td>32 </td>
                            <td>AAAAA2</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Jason</td>
                            <td>Jones</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>SDD</td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center" ng-class="{'red':r.AvlBalance.toFixed(2)<0}">
                                <input width="15" type="checkbox" class="toggle" id="BG8XW14THT#0##tes#">
                            </td>
                            <td>33 </td>
                            <td>BG8XW14THT</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>tes</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>KYC Pending Verification </td>
                            <td>Champion </td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center" >
                                <input width="15" type="checkbox" class="toggle" id="FD67D9X1YH#0##Jim#Corbett">
                            </td>
                            <td>34 </td>
                            <td>FD67D9X1YH</td>
                            <td>NA</td>
                            <td></td>
                            <td>0.00</td>
                            <td>Jim</td>
                            <td>Corbett</td>
                            <td></td>
                            <td></td>
                            <td>0</td>
                            <td>Incomplete</td>
                            <td>Champion</td>
                            <td></td>
                        </tr><tr ng-repeat="r in FilteredGrid" class="ng-scope" style="display: none;">

                            <td width="35px" style="text-align:center">
                                <input width="15" type="checkbox" class="toggle" id="few154#0##Stanley#Raddford">
                            </td>
                            <td">35 </td>
                            <td">few154</td>
                            <td">NA</td>
                            <td"></td>
                            <td">0.00</td>
                            <td">Stanley</td>
                            <td">Raddford</td>
                            <td"></td>
                            <td"></td>
                            <td">0</td>
                            <td">Client Verified</td>
                            <td">Champion </td>
                            <td"></td>
                        </tr>
                        </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...