Print Image Issue with IE

knockknock · July 2018

Hello,

I have a problem printing JSBarcode Images with the datatables print functionality withint IE. (tested IE11 and Edge)
For Chrome and Firefox everything works fine.

My JS looks like this:

            dom: 'Blfrtip',    
                  buttons: [  
                    {
                        extend: 'print',
                        text: 'Print',
                        className: 'btn btn-primary btn-sm',
                        exportOptions : {
                            stripHtml : false,
                            columns: [ 0, 1, 2, 3, 4, 5, 6 , 7, 8 ]
                        },

Within the normal datatable everything works fine.

After clicking the button print the preview page is opened. There the Images are shown for a millisecond before they disappear. Also if I print the page, the images are disapeared

IE11 DOM-Explorers code at the Preview page looks ok to me.

<td>
<img class="code128" src="data:///image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAA8CAYAAAAjW/WRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEESURBVHhe7d0xDsIwEADBhP//GZDAjYXX7plpgpJwl2aVgoL7+XYBPz2+R+AHgUAQCASBQBAIBIFAEAgEgUAQCITjX9Lv+/5++hhfG+fnMfP9w+6+ee6wOz87fa7V9d3cYfdcu33Dau/ueYbd/tO585zZPHdlt+90/3x9WO1fzT+dO/MGgSAQCAKBIBAIAoEgEAgCgSAQCAKBIBAIAoEgEAgCgSAQCAKBIBAIAoEgEAgCgSAQCAKBIBAIAoEgEAgCgSAQCAKBIBAIAoEgEAgCgSAQCAKBIBAIAoEgEAgCgSAQCAKBcPw/6fCPvEEgCASCQCAIBIJAIAgEgkAgCASCQGDpul7beldqWqxpjwAAAABJRU5ErkJggg==" jsbarcode-value="3006306682" jsbarcode-ean128="true" jsbarcode-displayvalue="false" jsbarcode-width="2" jsbarcode-height="40" jsbarcode-textalign="left" jsbarcode-textmargin="0" jsbarcode-fontsize="8">
</td>

Is ther any idea out ther to solve this?
Thanks in advance!

colin · July 2018

Please try the nightly version of the HTML5 export buttons which should resolve this.

Allan

knockknock · July 2018

Hi Colin,

thanks for your fast reply.

Unfortunately the issue ist not solved. Still working for Chrome and Firefox but not for IE11 and Edge

                <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

                <!-- data table Plugin -->
                <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
                <script type="text/javascript" src="js/dataTables.buttons.min.js"></script>
                <script type="text/javascript" src="js/buttons.html5.min.js"></script>
                <script type="text/javascript" src="js/buttons.print.min.js"></script>

all Buttons are using the Js from http://beqi.datatables.net/download/nightly

any other ideas?

allan · July 2018

Are you able to give me a link to a page showing the issue please? If the HTML looks correct in the inspector, I can't help but suspect that this is going to be an IE bug.

Allan

knockknock · July 2018

Hi allan, thanks for your reply.

It does not seem to be an IE problem by itself, since the IE-in-build print-preview works. (Browser rigthclick: print-preview)

Since I have no DMZ Webspace, It's hard to show the page to you.
Here is a simple example with a hardcoded Barcode and also does not work.

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
            <!--- Bootstrap CSS --->
            <link href="css/bootstrap-3.3.7.min.css" rel="stylesheet">
            <link href="css/jquery.dataTables.min.css" rel="stylesheet">
            <link href="css/buttons.dataTables.min.css" rel="stylesheet">
            <link href="css/raag.css" rel="stylesheet" media="screen">

            <!-- JSBarcode libraries (muessen vorab eingelesen werden) -->
            <script type="text/javascript" src="js/jsbarcode/JsBarcode.all.js"></script>
        </head>
        <body>
            <!--- data table ---->
            <div class="container-fluid">
                <div class="table-responsive">
                    <table id="data_table" class="table table-striped table-hover table-bordered  table-condensed">
                        <thead>
                            <tr>
                                <th>
                                    Test 1
                                </th>
                                <th>
                                    Test 2
                                </th>
                                <th>
                                    Test 3
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    Testentry 1
                                </td>
                                <td>
                                    <img class="code128"
                                        jsbarcode-value="123456"
                                        jsbarcode-ean128="true"
                                        jsbarcode-displayValue="false"
                                        jsbarcode-width="2"
                                        jsbarcode-height="40"
                                        jsbarcode-textAlign="left"
                                        jsbarcode-textMargin="0"
                                        jsbarcode-fontSize="8"
                                        />
                                    <br>
                                </td>
                </div>
            </div>
            </td> <td style="text-align:center; vertical-align:middle;"> <input type="checkbox" class="chk1" id="chkbox_1" name="checkbox_style" value="" #daten.RAAG_ABSCHLUSS# > </td> </tr> </tbody> </table> </div> </div>

            <!--- generating the barcode --->
            <script>
                  (function() {
                     JsBarcode(".code128").init();
                  })();
            </script>


            <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
            <!-- data table Plugin -->
            <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="js/dataTables.buttons.min.js"></script>
            <script type="text/javascript" src="js/buttons.html5.min.js"></script>
            <script type="text/javascript" src="js/buttons.print.min.js"></script>
            <script type="text/javascript" src="js/datepicker.js"></script>
            <script type="text/javascript" src="js/table.js"></script>
            <script type="text/javascript" src="js/bootstrap-3.3.7.min.js"></script>

        </body>
    </html>

Javascript:

$(document).ready(function(){
        // disable settings of jquery datatable
        $('#data_table').dataTable( {

              // Feld mit Anzeiger der Anzahl 10/50/100 usw.
              "lengthChange": true,
              // Suchfeld
              "searching": true,
              // unterdrueckt die Seitennummerierung Vor/Zur&uumlck usw.
              "bPaginate": true,
              // Sprachsteuerung
               "language": {

                                "sEmptyTable":          "Keine Daten in der Tabelle vorhanden",
                                "sInfo":                "_START_ bis _END_ von _TOTAL_ Eintr&aumlgen",
                                "sInfoEmpty":           "0 bis 0 von 0 Eintr&aumlgen",
                                "sInfoFiltered":        "(gefiltert von _MAX_ Eintr&aumlgen)",
                                "sInfoPostFix":         "",
                                "sInfoThousands":       ".",
                                "sLengthMenu":          "_MENU_ Eintr&aumlge anzeigen",
                                "sLoadingRecords":      "Wird geladen...",
                                "sProcessing":          "Bitte warten...",
                                "sSearch":              "Suchen",
                                "sZeroRecords":         "Keine Eintr&aumlge vorhanden.",
                                "oPaginate": {
                                        "sFirst":       "Erste",
                                        "sPrevious":    "Zur&uumlck",
                                        "sNext":        "N&aumlchste",
                                        "sLast":        "Letzte"
                                },
                                "oAria": {
                                        "sSortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                                        "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
                                }

                },


                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'print',
                        text: 'Drucken',
                        className: 'btn btn-primary btn-sm',
                        exportOptions : {
                            stripHtml : false,
                            columns: [ 0, 1, 2 ]
                        },
                        // Druck Querformat
                       customize: function(win)
                        {

                            var last = null;
                            var current = null;
                            var bod = [];

                            var css = '@page { size: landscape; }',
                                head = win.document.head || win.document.getElementsByTagName('head')[0],
                                style = win.document.createElement('style');

                            style.type = 'text/css';
                            style.media = 'print';

                            if (style.styleSheet)
                            {
                              style.styleSheet.cssText = css;
                            }
                            else
                            {
                              style.appendChild(win.document.createTextNode(css));
                            }

                            head.appendChild(style);
                     }
                    }
                    ]


         } );

        $('#data_table').dataTable();

});

allan · July 2018

So the print window that Buttons creates doesn't show the barcodes, but when you have a print preview from that window, it does!?

Are you able to make a working test case using http://live.datatables.net , JSFiddle, CodePen or something else? Alternatively, I can use the above to make a working test case under the quick support packages.

Allan

knockknock · July 2018

I have access to a temporary webspace now. Could you please take a look at the following website.

https://www.tirol-kliniken.at/temp/datatables/print_test.html

Its the same sourcecode from the example above
tyvm.

allan · July 2018

Thank you - could you add autoPrint: false to your print button's configuration please? That way I can inspect the generated page.

Allan

knockknock · July 2018

Hey Allan,

the autoprint is disabled now.

allan · July 2018

The print preview from the original window works okay, but not from the generated print page. This really does look like an IE bug to me. As far as I can see the print page is generated correctly and the data image is inserted into the document correctly. I don't see any reason why IE can't display it I'm afraid. There are no warnings or errors from IE either.

I'll have a bit more of a play later on, but I'm not hopefuly to be honest.

Allan

knockknock · July 2018

I was afraid of that. Hopefully you can find some kind of workaround later on.
thanks for your help.

knockknock · July 2018

I've just played around a bit with jquery and built a simple print screen by myself. This is working. Probably its not a IE Bug?

Please take a look at this page without the datatable print functionality.

https://www.tirol-kliniken.at/temp/datatables/print_test2.html

Hopefully this is a hint that helps you to identify the issue.

allan · July 2018

Yes it works in that example, but its not doing the same thing as the Print button from the Buttons library. In Buttons it creates the HTML for a table and used window.open() to create a new window and the created HTML is inserted into that.

A test to demonstrate if this is an IE issue or not would be to use window.open() and write in an img tag which uses data:// as its data source rather than a url.

Allan

knockknock · July 2018

Hi allan,

did you have time to review the issue already?
I was not able to identify, if its an IE bug or not.

tyvm

allan · July 2018

I haven't had a change to create the test case I suggested above. I'm still fairly certain it is an IE issue though.

Allan

Print Image Issue with IE

Print Image Issue with IE

Answers

Howdy, Stranger!

Categories

DataTables

Print Image Issue with IE

Print Image Issue with IE

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables