在多個頁面分頁中打印所有數據

[英]Print all data in multiple page pagination


I have problem to print all data in data table that have pagination. I have already do research and found this same question in this link

我有問題打印所有數據在數據表有分頁。我已經做過研究,在這個鏈接中發現了同樣的問題

Print <div id="printarea"></div> only?

打印< div id = " printarea " > < / div > ?

Printing multiple pages with Javascript

用Javascript打印多個頁面。

but some of the coding wont work in my project or maybe i dont understand the coding.

但是有些編碼在我的項目中行不通,或者我不理解編碼。

this is the example coding that i already tried..so basically i have 19 data in the database ..but in this page i limit it to 15

這是我已經嘗試過的示例代碼。基本上我在數據庫中有19個數據。但在這個頁面中,我將它限制為15。

example

so when i click button print i dont have to go to every page to print all the data in data table.

因此,當我點擊按鈕打印時,我不必去每個頁面打印數據表中的所有數據。

this is the code that i use for button print

這是我用來打印按鈕的代碼

<div id="printableArea">
  <h1>Print me</h1>

Javascript

Javascript

function printDiv(divName) {
 var printContents = document.getElementById(divName).innerHTML;
 var originalContents = document.body.innerHTML;

 document.body.innerHTML = printContents;

 window.print();

 document.body.innerHTML = originalContents;
}

3 个解决方案

#1


1  

So for this Table if you apply the print option it will print all the data that are available since if it under pagination also as required by you.

對於這個表,如果你應用打印選項它會打印所有可用的數據因為如果它也按照你的要求進行分頁。

DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

DataTables是jQuery JavaScript庫的一個插件。它是一個高度靈活的工具,基於漸進式增強的基礎,並將向任何HTML表添加高級交互控件。

You can apply Datatable to any table as per your wish.

您可以根據自己的意願對任何表應用Datatable。

Js to be added on your page:

在您的頁面上添加Js:

$(document).ready(function(){
    $('#myTable').DataTable();
});

CSS:

CSS:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

JS:

JS:

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

HTML Table:

HTML表:

<div id="printableArea">    
<table id="myTable" class="display" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <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>
    </table>
</div>

Hence if you apply the datatable for this Table you will receive an output like this.

因此,如果您為這個表應用datatable,您將收到這樣的輸出。

Output:

輸出:

enter image description here

#2


0  

Try This Code

試試這個代碼

HTML Code

HTML代碼

 <div id="printableArea">    
        <table id="printableAreaTable" class="display" width="100%" cellspacing="0">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>                    
                    <th>Salary</th>
                </tr>
            </thead>          
            <tbody>
                <tr>
                    <td>1</td>
                    <td>ABC1</td>
                    <td>100000</td>                  
                </tr>
                <tr>
                    <td>2</td>
                    <td>ABC2</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>ABC23</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>ABC4</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>ABC5</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>ABC6</td>
                    <td>100000</td>
                </tr>
                <tr>
                   <td>7</td>
                    <td>ABC7</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>ABC8</td>
                    <td>100000</td>                  
                </tr>
                <tr>
                    <td>9</td>
                    <td>ABC9</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>ABC10</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>ABC11</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>ABC12</td>
                    <td>100000</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>ABC13</td>
                    <td>100000</td>
                </tr>
                <tr>
                   <td>14</td>
                    <td>ABC14</td>
                    <td>100000</td>
                </tr>
           </tbody>
        </table>
    </div>

javascript

javascript

   $(document).ready(function() {
    $('#printableAreaTable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
    } );
} );

Js Files

Js文件

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

cs files

cs文件

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />

Output

輸出

enter image description here

#3


0  

Had the same problem recently for a paginated grid with about 5000 rows. Since we do not have the full data rendered in the browser, calling print() will only show the current rows in the viewport.

最近,一個有5000行的分頁網格也遇到了同樣的問題。由於我們沒有在瀏覽器中呈現完整的數據,所以調用print()只會顯示viewport中的當前行。

What we end up doing is sending the model(data backing the grid) back to server, do the server side rendering(we use thymeleaf), then send back the full html string to browser. Now we could create a iframe on the fly and write the content to it and call print() on the iframe. Lastly, we remove the iframe from DOM. Client side code in the success callback looks like:

我們最后要做的是將模型(數據支持網格)發送回服務器,執行服務器端呈現(我們使用thymeleaf),然后將完整的html字符串發送回瀏覽器。現在我們可以動態地創建一個iframe並將內容寫到它並在iframe上調用print()。最后,我們從DOM中刪除iframe。成功回調中的客戶端代碼如下:

    var printIFrame = document.createElement('iframe');
    document.body.appendChild(printIFrame);
    printIFrame.style.position = 'absolute';
    printIFrame.style.top = -999;
    printIFrame.style.left = -999;
    var frameWindow = printIFrame.contentWindow || printIFrame.contentDocument || printIFrame;
    var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
    wdoc.write(res.data);
    wdoc.close();
    // Fix for IE : Allow it to render the iframe
    frameWindow.focus();
    try {
        // Fix for IE11 - printng the whole page instead of the iframe content
        if (!frameWindow.document.execCommand('print', false, null)) {
            // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
            frameWindow.print();
        }
        // focus body as it is losing focus in iPad and content not getting printed
        document.body.focus();
    }
    catch (e) {
        frameWindow.print();
    }
    frameWindow.close();
    setTimeout(function() {
        printIFrame.parentElement.removeChild(printIFrame);
    }, 0); 

For the server side part, you generate the html with whatever technology you have. If you happen to have similar stack as us(Java/Spring/Angular), look at my other POST. Hopefully this could help someone having similar problem with paginated data browser printing.

對於服務器端部分,可以使用任何技術生成html。如果你碰巧有和我們相似的棧(Java/Spring/ angle),看看我的另一篇文章。希望這能幫助有類似問題的人使用分頁的數據瀏覽器打印。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/09/01/15929b052a27cbfef3eb82e063c6dba2.html



 
  © 2014-2022 ITdaan.com