javascript - Printing datamatrix gives a blank page - Stack Overflow

admin管理员组

文章数量:1295874

Thank you for looking at my question,

Using this code set up I can generate a datmatrix code to the screen, html2pdf() fires and opens an instance of acrobat but the page is blank.

I have a similar set up from which I can print a standard 2D barcode quite easily.

Please can anybody tell what I've missed

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<h2>DM Code Output Test</h2>
</br>
</br>

    <table width="100%" border="1">
        <tr>
            <td align="left" width="2%" rowspan="2">
                &nbsp;
            </td>
            <td align="left"width="20%"
                <font color="#17365D">Input Value: </font><input type="text" name="ip_source" id="ip_source" size="50"/>
            </td>
            <td align="left">
                      
                <div id="div_barcode" name="div_barcode" class="col-lg-8" align="center">
                    <svg style="display:none" name="barcode" id="barcode">
                    </svg>
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                <button name="btn_dmcode" id="btn_dmcode">Press Me</button>
            </td>
                 <td align="left">
                      &nbsp;
            </td>
        </tr>
    </table>

<script src="/[email protected]/dist/JsBarcode.all.min.js"></script>

<script src=".4.4/qrcode.js" integrity="sha512-oxrVyBhqnzQ0BzuM0A/6dEIk0alz0p4SpDRaWvtuUoarIc8rnL5lVniHG5Dp21MRFojcQcmKHjaskNXhSaUPPw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="datamatrix.min.js"></script>
<script src=".5.3/jspdf.min.js"></script> 

<script src=".js/97edc524c04db3d30a3fdf00c1fd0988cfa82888/dist/dataMatrix.js"></script>
                
<script src=".js/0.9.3/html2pdf.bundle.min.js"></script>

<script>
$(document).ready(function(){
    const cp = "\u00a0";

    $("#btn_dmcode").click(function(){
        var source = $("#ip_source").val();
        var barcode = document.getElementById("barcode");

        dataMatrix(source)
            .then(barcode => document.body.appendChild(barcode))

        // Choose the element id which you want to export.
        var element = document.getElementById('div_barcode');
        element.style.width = '100px';
        element.style.height = '100px';
        var opt = {
            margin:      0.5,
            filename:    'mydmcode.pdf',
            image:       { type: 'png', quality: 1 },
            html2canvas: { scale: 1 },          
            jsPDF:       { unit: 'mm', format: [50,50], orientation: 'landscape', precision: '12' }         
         };

        // choose the element and pass it to html2pdf() function and call the save() on it to save as pdf.
        html2pdf().set(opt).from(element).save();
        
    });

});
</script>

This is the 2d barcode javascript that works

        var stemassno = document.getElementById("stemassno").textContent;
        var barcode = document.getElementById("barcode");

        JsBarcode(barcode, stemassno, {
            height: 20,
            width: 2
        });

        barcode.style.display = "inline";
        
        // Choose the element id which you want to export.
        var element = document.getElementById('div_barcode');
        element.style.width = '100px';
        element.style.height = '50px';
        var opt = {
            margin:      0.5,
            filename:    'myfile.pdf',
            image:       { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 1 },          
            jsPDF:       { unit: 'mm', format: [60,22], orientation: 'landscape', precision: '12' }         
         };

        // choose the element and pass it to html2pdf() function and call the save() on it to save as pdf.
        html2pdf().set(opt).from(element).save();
        
    });

Thank you for looking at my question,

Using this code set up I can generate a datmatrix code to the screen, html2pdf() fires and opens an instance of acrobat but the page is blank.

I have a similar set up from which I can print a standard 2D barcode quite easily.

Please can anybody tell what I've missed

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<h2>DM Code Output Test</h2>
</br>
</br>

    <table width="100%" border="1">
        <tr>
            <td align="left" width="2%" rowspan="2">
                &nbsp;
            </td>
            <td align="left"width="20%"
                <font color="#17365D">Input Value: </font><input type="text" name="ip_source" id="ip_source" size="50"/>
            </td>
            <td align="left">
                      
                <div id="div_barcode" name="div_barcode" class="col-lg-8" align="center">
                    <svg style="display:none" name="barcode" id="barcode">
                    </svg>
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                <button name="btn_dmcode" id="btn_dmcode">Press Me</button>
            </td>
                 <td align="left">
                      &nbsp;
            </td>
        </tr>
    </table>

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/JsBarcode.all.min.js"></script>

<script src="https://cdnjs.cloudflare/ajax/libs/qrcode/1.4.4/qrcode.js" integrity="sha512-oxrVyBhqnzQ0BzuM0A/6dEIk0alz0p4SpDRaWvtuUoarIc8rnL5lVniHG5Dp21MRFojcQcmKHjaskNXhSaUPPw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="datamatrix.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> 

<script src="https://rawcdn.githack/GitHub30/dataMatrix.js/97edc524c04db3d30a3fdf00c1fd0988cfa82888/dist/dataMatrix.js"></script>
                
<script src="https://cdnjs.cloudflare/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>

<script>
$(document).ready(function(){
    const cp = "\u00a0";

    $("#btn_dmcode").click(function(){
        var source = $("#ip_source").val();
        var barcode = document.getElementById("barcode");

        dataMatrix(source)
            .then(barcode => document.body.appendChild(barcode))

        // Choose the element id which you want to export.
        var element = document.getElementById('div_barcode');
        element.style.width = '100px';
        element.style.height = '100px';
        var opt = {
            margin:      0.5,
            filename:    'mydmcode.pdf',
            image:       { type: 'png', quality: 1 },
            html2canvas: { scale: 1 },          
            jsPDF:       { unit: 'mm', format: [50,50], orientation: 'landscape', precision: '12' }         
         };

        // choose the element and pass it to html2pdf() function and call the save() on it to save as pdf.
        html2pdf().set(opt).from(element).save();
        
    });

});
</script>

This is the 2d barcode javascript that works

        var stemassno = document.getElementById("stemassno").textContent;
        var barcode = document.getElementById("barcode");

        JsBarcode(barcode, stemassno, {
            height: 20,
            width: 2
        });

        barcode.style.display = "inline";
        
        // Choose the element id which you want to export.
        var element = document.getElementById('div_barcode');
        element.style.width = '100px';
        element.style.height = '50px';
        var opt = {
            margin:      0.5,
            filename:    'myfile.pdf',
            image:       { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 1 },          
            jsPDF:       { unit: 'mm', format: [60,22], orientation: 'landscape', precision: '12' }         
         };

        // choose the element and pass it to html2pdf() function and call the save() on it to save as pdf.
        html2pdf().set(opt).from(element).save();
        
    });

• javascript
• html2pdf
• datamatrix

Share Follow asked Feb 12 at 1:26 Gary CroxfordGary Croxford 1 1

• What I've realised is that the datamatrix code image is not being added to the svg element id='barcode' but is being appended to the bottom of the page. How do I get the datamatrix to display in the svg element or point to the html2pdf routine to the new element containing the datamatrix? Nothing I've tried works. – Gary Croxford Commented Feb 12 at 8:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solution from Chris Stanyon on Experts Exchange:

Post the output image direct to a <div> rather than a <svg> element and execute the pdf creation within the promise transaction dm_barcode =>

    $("#btn_dmcode").click(function(){
        var source = $("#ip_source").val();

        dataMatrix("http://10.30.1.42:3001/Index.php?page=Home")
        
           
        .then(dm_barcode =>  {
            // Now we've got the result of dataMatrix, let's use it.  
            $('#div_barcode').append(dm_barcode);

             // Now run the PDF stuff
            let element = $('#div_barcode');
            element.width(100);
            element.height(250);

            let opt = {
                margin:      0.5,
                filename:    'mydmcode.pdf',
                image:       { type: 'png', quality: 1 },
                html2canvas: { scale: 1 },          
                jsPDF:       { unit: 'mm', format: [68,68], orientation: 'landscape', precision: '12' }         
             };

            html2pdf().set(opt).from(element[0]).save();
        })
  });

本文标签： javascriptPrinting datamatrix gives a blank pageStack Overflow