Sasquatch Whisperer
Reputation: 33
How to get Code39 barcode to display on PDF file?
I'm using code39.js to generate barcodes. The barcode displays correctly when sent in the body of an email, but only the numbers appear when I use the same HTML to create a PDF.
let message = HtmlService.createHtmlOutputFromFile('Barcode Context').getContent();
let barcode = Code39(theX, theY, barcodeHeight, bcFontHeight, barcodeText, barcodeSize);
message = message.replace("%barcode",barcode);
const blob = Utilities.newBlob(message,MimeType.HTML);
const filename = "barcode";
blob.setName(filename);
GmailApp.sendEmail('[email protected]',"Testing Barcode",message,
{htmlBody: message, attachments: [blob.getAs(MimeType.PDF)] });
This is how the email displays, you can see that the email body displays the barcode while the attached PDF only shows the numbers:
The HTML in the email body is identical to the attachment, the only difference is this section at the bottom encoding it as an attachment.
Content-Type: application/pdf; name="barcode.pdf"
Content-Disposition: attachment; filename="barcode.pdf"
Content-Transfer-Encoding: base64
Here's the original message for the received email:
Received: from 953292141602 named unknown by gmailapi.google.com with HTTPREST; Wed, 24 Aug 2022 17:25:27 +0000
MIME-Version: 1.0
Subject: Testing Barcode
To: xx
Cc:
Bcc:
Sender: xx
From: xx
Message-Id: xx
Date: Wed, 24 Aug 2022 17:25:27 +0000
Content-Type: multipart/mixed; boundary="00000000000085b23e05e6fff7d7"
--00000000000085b23e05e6fff7d7
Content-Type: multipart/alternative; boundary="00000000000085b23805e6fff7d5"
--00000000000085b23805e6fff7d5
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE html>
<html>
<head>
<base target=3D"_top">
</head>
<body>
<div style=3D'font-size:12px;font-family:Verdana;'><table noborder cell=
padding=3D0 cellspacing=3D0><tr><td rowspan=3D2 valign=3Dtop><div style=3D'=
float: left;background-color: #000; width:2px; height:50px;'></div><div sty=
le=3D'float: left;background-color: #fff; width:5px; height:50px;'></div><d=
iv style=3D'float: left;background-color: #000; width:2px; height:50px;'></=
div><div style=3D'float: left;background-color: #fff; width:2px; height:50p=
x;'></div><div style=3D'float: left;background-color: #000; width:5px; heig=
ht:50px;'></div><div style=3D'float: left;background-color: #fff; width:2px=
; height:50px;'></div><div style=3D'float: left;background-color: #000; wid=
th:5px; height:50px;'></div><div style=3D'float: left;background-color: #ff=
f; width:2px; height:50px;'></div><div style=3D'float: left;background-colo=
r: #000; width:2px; height:50px;'></div><div style=3D'float: left;backgroun=
d-color: #fff; width:2px; height:50px' ></div></td><td><div style=3D'float:=
left;background-color: #000; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #fff; width:2px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #000; width:5px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #fff; width:2px; height:37px;'></=
div><div style=3D'float: left;background-color: #000; width:5px; height:37p=
x;'></div><div style=3D'float: left;background-color: #fff; width:2px; heig=
ht:37px;'></div><div style=3D'float: left;background-color: #000; width:2px=
; height:37px;'></div><div style=3D'float: left;background-color: #fff; wid=
th:5px; height:37px;'></div><div style=3D'float: left;background-color: #00=
0; width:2px; height:37px;'></div><div style=3D'float: left;background-colo=
r: #fff; width:2px; height:37px' ></div></td><td><div style=3D'float: left;=
background-color: #000; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #fff; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #000; width:5px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #fff; width:2px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #000; width:5px; height:37px;'></=
div><div style=3D'float: left;background-color: #fff; width:2px; height:37p=
x;'></div><div style=3D'float: left;background-color: #000; width:2px; heig=
ht:37px;'></div><div style=3D'float: left;background-color: #fff; width:5px=
; height:37px;'></div><div style=3D'float: left;background-color: #000; wid=
th:2px; height:37px;'></div><div style=3D'float: left;background-color: #ff=
f; width:2px; height:37px' ></div></td><td><div style=3D'float: left;backgr=
ound-color: #000; width:5px; height:37px;'></div><div style=3D'float: left;=
background-color: #fff; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #000; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #fff; width:2px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #000; width:2px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #fff; width:5px; height:37px;'></=
div><div style=3D'float: left;background-color: #000; width:5px; height:37p=
x;'></div><div style=3D'float: left;background-color: #fff; width:2px; heig=
ht:37px;'></div><div style=3D'float: left;background-color: #000; width:2px=
; height:37px;'></div><div style=3D'float: left;background-color: #fff; wid=
th:2px; height:37px' ></div></td><td><div style=3D'float: left;background-c=
olor: #000; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #fff; width:5px; height:37px;'></div><div style=3D'float: left;=
background-color: #000; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #fff; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #000; width:2px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #fff; width:2px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #000; width:5px; height:37px;'></=
div><div style=3D'float: left;background-color: #fff; width:2px; height:37p=
x;'></div><div style=3D'float: left;background-color: #000; width:5px; heig=
ht:37px;'></div><div style=3D'float: left;background-color: #fff; width:2px=
; height:37px' ></div></td><td><div style=3D'float: left;background-color: =
#000; width:2px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #fff; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #000; width:2px; height:37px;'></div><div style=3D'float: left;=
background-color: #fff; width:5px; height:37px;'></div><div style=3D'float:=
left;background-color: #000; width:5px; height:37px;'></div><div style=3D'=
float: left;background-color: #fff; width:2px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #000; width:5px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #fff; width:2px; height:37px;'></=
div><div style=3D'float: left;background-color: #000; width:2px; height:37p=
x;'></div><div style=3D'float: left;background-color: #fff; width:2px; heig=
ht:37px' ></div></td><td><div style=3D'float: left;background-color: #000; =
width:5px; height:37px;'></div><div style=3D'float: left;background-color: =
#fff; width:2px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #000; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #fff; width:5px; height:37px;'></div><div style=3D'float: left;=
background-color: #000; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #fff; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #000; width:5px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #fff; width:2px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #000; width:2px; height:37px;'></=
div><div style=3D'float: left;background-color: #fff; width:2px; height:37p=
x' ></div></td><td><div style=3D'float: left;background-color: #000; width:=
2px; height:37px;'></div><div style=3D'float: left;background-color: #fff; =
width:2px; height:37px;'></div><div style=3D'float: left;background-color: =
#000; width:5px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #fff; width:5px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #000; width:2px; height:37px;'></div><div style=3D'float: left;=
background-color: #fff; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #000; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #fff; width:2px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #000; width:5px; height:37px;'></div><d=
iv style=3D'float: left;background-color: #fff; width:2px; height:37px' ></=
div></td><td><div style=3D'float: left;background-color: #000; width:5px; h=
eight:37px;'></div><div style=3D'float: left;background-color: #fff; width:=
2px; height:37px;'></div><div style=3D'float: left;background-color: #000; =
width:5px; height:37px;'></div><div style=3D'float: left;background-color: =
#fff; width:5px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #000; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #fff; width:2px; height:37px;'></div><div style=3D'float: left;=
background-color: #000; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #fff; width:2px; height:37px;'></div><div style=3D'=
float: left;background-color: #000; width:2px; height:37px;'></div><div sty=
le=3D'float: left;background-color: #fff; width:2px; height:37px' ></div></=
td><td><div style=3D'float: left;background-color: #000; width:2px; height:=
37px;'></div><div style=3D'float: left;background-color: #fff; width:2px; h=
eight:37px;'></div><div style=3D'float: left;background-color: #000; width:=
5px; height:37px;'></div><div style=3D'float: left;background-color: #fff; =
width:5px; height:37px;'></div><div style=3D'float: left;background-color: =
#000; width:2px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #fff; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #000; width:2px; height:37px;'></div><div style=3D'float: left;=
background-color: #fff; width:2px; height:37px;'></div><div style=3D'float:=
left;background-color: #000; width:5px; height:37px;'></div><div style=3D'=
float: left;background-color: #fff; width:2px; height:37px' ></div></td><td=
><div style=3D'float: left;background-color: #000; width:2px; height:37px;'=
></div><div style=3D'float: left;background-color: #fff; width:2px; height:=
37px;'></div><div style=3D'float: left;background-color: #000; width:5px; h=
eight:37px;'></div><div style=3D'float: left;background-color: #fff; width:=
5px; height:37px;'></div><div style=3D'float: left;background-color: #000; =
width:2px; height:37px;'></div><div style=3D'float: left;background-color: =
#fff; width:2px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #000; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #fff; width:2px; height:37px;'></div><div style=3D'float: left;=
background-color: #000; width:5px; height:37px;'></div><div style=3D'float:=
left;background-color: #fff; width:2px; height:37px' ></div></td><td><div =
style=3D'float: left;background-color: #000; width:2px; height:37px;'></div=
><div style=3D'float: left;background-color: #fff; width:5px; height:37px;'=
></div><div style=3D'float: left;background-color: #000; width:2px; height:=
37px;'></div><div style=3D'float: left;background-color: #fff; width:2px; h=
eight:37px;'></div><div style=3D'float: left;background-color: #000; width:=
2px; height:37px;'></div><div style=3D'float: left;background-color: #fff; =
width:2px; height:37px;'></div><div style=3D'float: left;background-color: =
#000; width:5px; height:37px;'></div><div style=3D'float: left;background-c=
olor: #fff; width:2px; height:37px;'></div><div style=3D'float: left;backgr=
ound-color: #000; width:5px; height:37px;'></div><div style=3D'float: left;=
background-color: #fff; width:2px; height:37px' ></div></td><td><div style=
=3D'float: left;background-color: #000; width:5px; height:37px;'></div><div=
style=3D'float: left;background-color: #fff; width:2px; height:37px;'></di=
v><div style=3D'float: left;background-color: #000; width:2px; height:37px;=
'></div><div style=3D'float: left;background-color: #fff; width:5px; height=
:37px;'></div><div style=3D'float: left;background-color: #000; width:2px; =
height:37px;'></div><div style=3D'float: left;background-color: #fff; width=
:2px; height:37px;'></div><div style=3D'float: left;background-color: #000;=
width:2px; height:37px;'></div><div style=3D'float: left;background-color:=
#fff; width:2px; height:37px;'></div><div style=3D'float: left;background-=
color: #000; width:5px; height:37px;'></div><div style=3D'float: left;backg=
round-color: #fff; width:2px; height:37px' ></div></td><td><div style=3D'fl=
oat: left;background-color: #000; width:2px; height:37px;'></div><div style=
=3D'float: left;background-color: #fff; width:2px; height:37px;'></div><div=
style=3D'float: left;background-color: #000; width:5px; height:37px;'></di=
v><div style=3D'float: left;background-color: #fff; width:5px; height:37px;=
'></div><div style=3D'float: left;background-color: #000; width:2px; height=
:37px;'></div><div style=3D'float: left;background-color: #fff; width:2px; =
height:37px;'></div><div style=3D'float: left;background-color: #000; width=
:2px; height:37px;'></div><div style=3D'float: left;background-color: #fff;=
width:2px; height:37px;'></div><div style=3D'float: left;background-color:=
#000; width:5px; height:37px;'></div><div style=3D'float: left;background-=
color: #fff; width:2px; height:37px' ></div></td><td><div style=3D'float: l=
eft;background-color: #000; width:5px; height:37px;'></div><div style=3D'fl=
oat: left;background-color: #fff; width:2px; height:37px;'></div><div style=
=3D'float: left;background-color: #000; width:5px; height:37px;'></div><div=
style=3D'float: left;background-color: #fff; width:5px; height:37px;'></di=
v><div style=3D'float: left;background-color: #000; width:2px; height:37px;=
'></div><div style=3D'float: left;background-color: #fff; width:2px; height=
:37px;'></div><div style=3D'float: left;background-color: #000; width:2px; =
height:37px;'></div><div style=3D'float: left;background-color: #fff; width=
:2px; height:37px;'></div><div style=3D'float: left;background-color: #000;=
width:2px; height:37px;'></div><div style=3D'float: left;background-color:=
#fff; width:2px; height:37px' ></div></td><td><div style=3D'float: left;ba=
ckground-color: #000; width:2px; height:37px;'></div><div style=3D'float: l=
eft;background-color: #fff; width:2px; height:37px;'></div><div style=3D'fl=
oat: left;background-color: #000; width:2px; height:37px;'></div><div style=
=3D'float: left;background-color: #fff; width:5px; height:37px;'></div><div=
style=3D'float: left;background-color: #000; width:5px; height:37px;'></di=
v><div style=3D'float: left;background-color: #fff; width:2px; height:37px;=
'></div><div style=3D'float: left;background-color: #000; width:2px; height=
:37px;'></div><div style=3D'float: left;background-color: #fff; width:2px; =
height:37px;'></div><div style=3D'float: left;background-color: #000; width=
:5px; height:37px;'></div><div style=3D'float: left;background-color: #fff;=
width:2px; height:37px' ></div></td><td rowspan=3D2 valign=3Dtop><div styl=
e=3D'float: left;background-color: #000; width:2px; height:50px;'></div><di=
v style=3D'float: left;background-color: #fff; width:5px; height:50px;'></d=
iv><div style=3D'float: left;background-color: #000; width:2px; height:50px=
;'></div><div style=3D'float: left;background-color: #fff; width:2px; heigh=
t:50px;'></div><div style=3D'float: left;background-color: #000; width:5px;=
height:50px;'></div><div style=3D'float: left;background-color: #fff; widt=
h:2px; height:50px;'></div><div style=3D'float: left;background-color: #000=
; width:5px; height:50px;'></div><div style=3D'float: left;background-color=
: #fff; width:2px; height:50px;'></div><div style=3D'float: left;background=
-color: #000; width:2px; height:50px;'></div><div style=3D'float: left;back=
ground-color: #fff; width:2px; height:50px' ></div></td></tr><tr><td align=
=3Dcenter style=3D'font-size:12px;font-family:Verdana;'>P</td><td align=3Dc=
enter style=3D'font-size:12px;font-family:Verdana;'>P</td><td align=3Dcente=
r style=3D'font-size:12px;font-family:Verdana;'>H</td><td align=3Dcenter st=
yle=3D'font-size:12px;font-family:Verdana;'>-</td><td align=3Dcenter style=
=3D'font-size:12px;font-family:Verdana;'>0</td><td align=3Dcenter style=3D'=
font-size:12px;font-family:Verdana;'>8</td><td align=3Dcenter style=3D'font=
-size:12px;font-family:Verdana;'>2</td><td align=3Dcenter style=3D'font-siz=
e:12px;font-family:Verdana;'>3</td><td align=3Dcenter style=3D'font-size:12=
px;font-family:Verdana;'>2</td><td align=3Dcenter style=3D'font-size:12px;f=
ont-family:Verdana;'>2</td><td align=3Dcenter style=3D'font-size:12px;font-=
family:Verdana;'>-</td><td align=3Dcenter style=3D'font-size:12px;font-fami=
ly:Verdana;'>1</td><td align=3Dcenter style=3D'font-size:12px;font-family:V=
erdana;'>2</td><td align=3Dcenter style=3D'font-size:12px;font-family:Verda=
na;'>3</td><td align=3Dcenter style=3D'font-size:12px;font-family:Verdana;'=
>4</td></tr></table></div>
</body>
</html>
--00000000000085b23805e6fff7d5
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE html>
<html>
<head>
<base target=3D"_top">
</head>
<body>
(I've removed this part, it's identical to the section above)
</body>
</html>
--00000000000085b23805e6fff7d5--
--00000000000085b23e05e6fff7d7
Content-Type: application/pdf; name="barcode.pdf"
Content-Disposition: attachment; filename="barcode.pdf"
Content-Transfer-Encoding: base64
--00000000000085b23e05e6fff7d7--
I run into this same issue when saving the HTML as a PDF in the Google Drive, or otherwise trying to download it as a PDF. so can this type of barcode just not be displayed on a PDF, will I need to use a different type of barcode generator?
Upvotes: 2
Views: 1152
Answers (1)
K J
Reputation: 11727
You use a script in your device to generate and view the barcode, thus the bare code in my viewer without loading the .js looks like this:-
And that is exactly what a PDF print or .js blocked e-mail viewer should show. Nowhere is there a means to use that script by other recipients especially in a PDF.
So you need to build the pdf using the js but then save the visual rendered result in a form that's suited to PDF which is usually either a BC39.ttf font (similar to https://fonts2u.com/bar-code-39.font) or an image.
As it stands the only part of the message that has any meaning to email receiver or PDF print is the row of text (font-family:Verdana) P P H .... etc.
<tr><td align="=3Dcenter" style="3D'font-size:12px;font-family:Verdana;'">P</td><td align="3Dc=" enter="" style="3D'font-size:12px;font-family:Verdana;'">P</td><td align="3Dcente=" r="" style="3D'font-size:12px;font-family:Verdana;'">H</td><td align="3Dcenter" st="yle=3D'font-size:12px;font-family:Verdana;'">-</td><td align="3Dcenter" style="=3D'font-size:12px;font-family:Verdana;'">0</td><td align="3Dcenter" style="3D'=" font-size:12px;font-family:verdana;'="">8</td><td align="3Dcenter" style="3D'font=" -size:12px;font-family:verdana;'="">2</td><td align="3Dcenter" style="3D'font-siz=" e:12px;font-family:verdana;'="">3</td><td align="3Dcenter" style="3D'font-size:12=" px;font-family:verdana;'="">2</td><td align="3Dcenter" style="3D'font-size:12px;f=" ont-family:verdana;'="">2</td><td align="3Dcenter" style="3D'font-size:12px;font-=" family:verdana;'="">-</td><td align="3Dcenter" style="3D'font-size:12px;font-fami=" ly:verdana;'="">1</td><td align="3Dcenter" style="3D'font-size:12px;font-family:V=" erdana;'="">2</td><td align="3Dcenter" style="3D'font-size:12px;font-family:Verda=" na;'="">3</td><td align="3Dcenter" style="3D'font-size:12px;font-family:Verdana;'=">4</td></tr>
I recommend not try to embed js in your output, here is an alternate means using CDN, that can provide a PDF printout of 1D codes, https://github.com/lindell/JsBarcode. Note 2D or QRcodes need a different Library.
JsBarcode("#barcode", "PPH-082322-1234", {format: "code39"});<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<body>
Hello</br>
Dear World!</br>
Here are your Bare Codes
<p>
SVG<svg id="barcode"></svg>
</p>
Canvas<canvas id="barcode"></canvas>
<p>
Image<img id="barcode" alt="code39 barcode value as PPH-082322-1234" />
</p>
</body>For QRcodes you will need CDN and different embedded script block
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div id="qrcode">Your QR code for PPH-082322-1234</div>
</body>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "PPH-082322-1234",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
Upvotes: 2
Related Questions
- pdf417 barcode reader/decoder in javascript?
- Generate pdf with barcode in Node.js
- phonegap barcode scanner not scanning pdf417 bar code
- How to print barCode using javascript or export barCode in pdf
- BarCode Issue While Printing in HTML format
- Add barcode to PDF
- Set Barcode to Code39?
- How to generate pdf417 barcode in phonegap android
- Adding barcodes to pdfs
- Barcode gnerator in a pdf document