JsPDF Example to Insert Google Web Fonts Inside PDF Document in Javascript

You are currently viewing JsPDF Example to Insert Google Web Fonts Inside PDF Document in Javascript

jsPDF Example to Insert Google Web Fonts inside PDF Document in Javascript

(<span class="hljs-keyword">function</span> (<span class="hljs-params">jsPDFAPI</span>) {
    <span class="hljs-string">"use strict"</span>;
    jsPDFAPI.<span class="hljs-title function_">addFileToVFS</span>(<span class="hljs-string">"[Your font's name]"</span>,<span class="hljs-string">"[Base64-encoded string of your font]"</span>);
})(jsPDF.<span class="hljs-property">API</span>);
 

(<span class="hljs-keyword">function</span> (<span class="hljs-params">jsPDFAPI</span>) {
    <span class="hljs-string">"use strict"</span>;
    jsPDFAPI.<span class="hljs-title function_">addFileToVFS</span>(<span class="hljs-string">"Arimo-Regular.ttf"</span>,<span class="hljs-string">"[Base64-encoded string of your font]"</span>);
    jsPDFAPI.<span class="hljs-title function_">addFileToVFS</span>(<span class="hljs-string">"Arimo-Bold.ttf"</span>,<span class="hljs-string">"[Base64-encoded string of your font]"</span>);
})(jsPDF.<span class="hljs-property">API</span>);
 

    <script src=<span class="hljs-string">"js/jspdf.min.js"</span>></script>
    <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jspdf.customfonts.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
    <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/default_vfs.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
 

<span class="hljs-keyword">const</span> doc = <span class="hljs-keyword">new</span> <span class="hljs-title function_">jsPDF</span>({
      <span class="hljs-attr">unit</span>: <span class="hljs-string">'pt'</span>
    });
 
doc.<span class="hljs-title function_">addFont</span>(<span class="hljs-string">"Arimo-Regular.ttf"</span>, <span class="hljs-string">"Arimo"</span>, <span class="hljs-string">"normal"</span>);
doc.<span class="hljs-title function_">addFont</span>(<span class="hljs-string">"Arimo-Bold.ttf"</span>, <span class="hljs-string">"Arimo"</span>, <span class="hljs-string">"bold"</span>);
 
doc.<span class="hljs-title function_">setFont</span>(<span class="hljs-string">"Arimo"</span>);
doc.<span class="hljs-title function_">setFontType</span>(<span class="hljs-string">"normal"</span>);
doc.<span class="hljs-title function_">setFontSize</span>(<span class="hljs-number">28</span>);
 
doc.<span class="hljs-title function_">text</span>(<span class="hljs-string">"Hello, World!"</span>, <span class="hljs-number">100</span>, <span class="hljs-number">100</span>);
 
doc.<span class="hljs-title function_">setFontType</span>(<span class="hljs-string">"bold"</span>);
 
doc.<span class="hljs-title function_">text</span>(<span class="hljs-string">"Hello, BOLD World!"</span>, <span class="hljs-number">100</span>, <span class="hljs-number">150</span>);
 
doc.<span class="hljs-title function_">save</span>(<span class="hljs-string">"customFonts.pdf"</span>);
 

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply