Is it possible to print QR Code with p:printer (or other method)

Community Driven Extensions Project
Post Reply
SrBruno
Posts: 9
Joined: 06 Dec 2012, 18:50

16 May 2019, 02:19

I'm unable to print a QR Code generated by pe:qrCode using p:printer tag. When I set renderMethod to img or div, it doesn't render to the screen at all. I don't see any documentation on how to use that attribute. I've seen various posts about needing other jars but it looks like that was for the older p:bacode functionality. When I print directly from the browser it will print but I am printing to labels so don't want to be printing the whole page. Since it is generated by jQuery on the client perhaps I need to use javascript to make it work. Before I go down these other paths I just want to know if anyone has had success printing qr codes generated by primefaces extensions.

Here is a sample of code that is generation QR Code but unable to print.

Code: Select all


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>QR Code</title>
</h:head>

<h:form>
    <h:panelGrid>
        <p:commandButton value="Print QR">
            <p:printer target="qrCodeElem"/>
        </p:commandButton>

        <p:commandButton value="Print QR Panel">
            <p:printer target="qrPanelId"/>
        </p:commandButton>

        <p:commandButton value="Print Hello">
            <p:printer target="helloId"/>
        </p:commandButton>

        <p:panel id="qrPanelId">
            <pe:qrCode id="qrCodeElem"
                       renderMethod="canvas"
                       text="someqrcode"
                       label="qrCodeLabel"
                       size="200"/>
        </p:panel>
    </h:panelGrid>

    <p:panel id="helloId">
        <h:outputText value="hello "/>
    </p:panel>
</h:form>

</html>
PF: 6.1 JSF 2.2, glassfish 4.0

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

16 May 2019, 13:17

I don't think p:printer will work.

I did find this on the QRCode issues: https://github.com/lrsjng/jquery-qrcode/issues/21
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

16 May 2019, 13:19

And here is another suggestion from Stack Overflow: https://stackoverflow.com/questions/923 ... pg-png-pdf
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

SrBruno
Posts: 9
Joined: 06 Dec 2012, 18:50

16 May 2019, 22:40

Thanks for the response. Do you have any idea what renderMethod="img" or "div" do and if they might help or be related?

Also wondering if the older method of printing qr codes is worth pursuing. I saw that people had trouble printing with that as well. It required some extra jars. When I looked, it appeared these jars are now only commercially available. Don't want to go down another dead end.
PF: 6.1 JSF 2.2, glassfish 4.0

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

16 May 2019, 23:08

Maybe this library: https://printjs.crabbly.com/

Check out the section on HTML printing. Might be able to just send the QRCode Div or Canvas to the printer.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

SrBruno
Posts: 9
Joined: 06 Dec 2012, 18:50

28 May 2019, 17:35

I was able to print the QR code using a simple print() command which will print the entire page.

Code: Select all

 <p:commandButton value="print()" onclick="print();"/>
I also needed css to tell it not to print the things I didn't want to print. It turned out I needed to have the CSS inline on the page. Putting it in my .css file did not ignore the parts I did not want to print. Here is the css

Code: Select all

 
style type="text/css">
@media print {
    .noPrint {
        display: none;
    }
  }
 </style>
 
Reference it with styleClass

Code: Select all

   <h:panelGrid styleClass="noPrint">
PF: 6.1 JSF 2.2, glassfish 4.0

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

28 May 2019, 18:42

Nice thanks for posting the answer!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

28 May 2019, 18:44

You should add your answer to Stack Overflow so others can see it in the future!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests