mirror/pdfme
1
0
Fork 0
mirror of https://github.com/pdfme/pdfme.git synced 2026-04-17 20:49:43 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
3e808ba59e17c689dc02e608fdd5184b1036ea53
pdfme/docs/getting-started.html
Kyohei Fukuda 3e808ba59e Deploy website - based on b97ab98334
2025-02-11 19:25:24 +09:00

155 lines
125 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-getting-started" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.7.0">
<title data-rh="true">Getting Started | pdfme</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://pdfme.com/img/ogimage.png"><meta data-rh="true" name="twitter:image" content="https://pdfme.com/img/ogimage.png"><meta data-rh="true" property="og:url" content="https://pdfme.com/docs/getting-started"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Getting Started | pdfme"><meta data-rh="true" name="description" content="Introduction"><meta data-rh="true" property="og:description" content="Introduction"><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://pdfme.com/docs/getting-started"><link data-rh="true" rel="alternate" href="https://pdfme.com/docs/getting-started" hreflang="en"><link data-rh="true" rel="alternate" href="https://pdfme.com/docs/getting-started" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://V6YWG1D4SV-dsn.algolia.net" crossorigin="anonymous"><link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1Z2MZW44WP"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-1Z2MZW44WP",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="pdfme" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.5b011cd5.css">
<script src="/assets/js/runtime~main.6ec5b0dd.js" defer="defer"></script>
<script src="/assets/js/main.7b711f51.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_mb4j" role="banner"><div class="announcementBarPlaceholder_vyr4"></div><div class="content_knG7 announcementBarContent_xLdY">⭐️ &nbsp; If you like pdfme, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/pdfme/pdfme">GitHub</a>! &nbsp; ⭐️</div><button type="button" aria-label="Close" class="clean-btn close closeButton_CVFx announcementBarClose_gvF7"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title text--truncate">pdfme</b></a></div><div class="navbar__items navbar__items--right"><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/getting-started">Documentation</a><a class="navbar__item navbar__link" href="/templates">Examples</a><a class="navbar__item navbar__link" href="/template-design">Template Design</a><a href="https://github.com/pdfme/pdfme" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://discord.gg/xWPTJbmgNV" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://app.pdfme.com?utm_source=website&amp;utm_content=navbar" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Try pdfme Cloud<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/docs/getting-started">Getting Started</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/supported-features">Supported Features</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tables">Tables with Dynamic Data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/expression">Expression</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/headers-and-footers">Headers and Footers</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/docs/custom-fonts">Customization</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/custom-fonts">Custom Fonts</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/custom-ui">Custom UI</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/custom-schemas">Custom Schemas(Plugins)</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/converter">Tools(New)</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/development-guide">Development Guide</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/template-contribution-guide">Template Contribution Guide ❤️</a></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Getting Started</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Getting Started</h1></header>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="introduction">Introduction<a href="#introduction" class="hash-link" aria-label="Direct link to Introduction" title="Direct link to Introduction">​</a></h2>
<p>pdfme was created to simplify the design and generation process of a PDF. It is especially useful for the following use cases:</p>
<ul>
<li>Need to create a designed PDF with short code.</li>
<li>Need to integrate PDF editor features into an application.</li>
<li>Need to create a large number of PDFs without compromising performance</li>
</ul>
<p>As an example, the author&#x27;s service <a href="https://labelmake.jp/" target="_blank" rel="noopener noreferrer">https://labelmake.jp/</a> can create more than 100 varieties of PDFs and generates more than 100,000 PDF files per month. Notably, the monthly server cost, utilizing Cloud Functions For Firebase, remains below $10.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="installation">Installation<a href="#installation" class="hash-link" aria-label="Direct link to Installation" title="Direct link to Installation">​</a></h2>
<p>The operating requirements should be the node environment <code>&gt;=16</code>.<br>
<!-- -->There are two packages in pdfme, generator and UI.</p>
<p>The package for generating PDF can be installed with the following command.</p>
<div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">npm i @pdfme/generator @pdfme/common</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>The packages for using PDF designer, forms and viewers can be installed with the following commands.</p>
<div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">npm i @pdfme/ui @pdfme/common</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>*You must install <code>@pdfme/common</code> regardless of which package you use.</p>
<p>The following type, function and classes are available in pdfme.</p>
<p><code>@pdfme/common</code></p>
<ul>
<li><a href="/docs/getting-started#template">Template</a></li>
</ul>
<p><code>@pdfme/generator</code></p>
<ul>
<li><a href="/docs/getting-started#generator">generate</a></li>
</ul>
<p><code>@pdfme/ui</code></p>
<ul>
<li><a href="/docs/getting-started#designer">Designer</a></li>
<li><a href="/docs/getting-started#form">Form</a></li>
<li><a href="/docs/getting-started#viewer">Viewer</a></li>
</ul>
<p>If your environment uses webpack, import the necessary items as shown below.</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> generate </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/generator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Designer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Viewer </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/ui&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>All objects use <code>Template</code>, which will be briefly explained in the next section.</strong></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="template">Template<a href="#template" class="hash-link" aria-label="Direct link to Template" title="Direct link to Template">​</a></h2>
<p>The core of pdfme library are Templates.<br>
<!-- -->Template Type can be imported by both <code>@pdfme/generator</code> or <code>@pdfme/ui</code>. Templates are used everywhere.</p>
<p>A template can be divided into two parts: a fixed part and a variable part.<br>
<!-- -->We call them basePdf and schema.
The following image is a good illustration of a template.</p>
<p><img decoding="async" loading="lazy" src="/assets/images/template-531b64ac757e305cc65430ed530b0773.png" width="1088" height="589" class="img_ev3q"></p>
<ul>
<li><strong>basePdf</strong>: PDF data for the fixed part of the PDF to be generated.</li>
<li><strong>schemas</strong>: Definition data for the variable part of the PDF to be generated.</li>
</ul>
<p>The <strong>basePdf</strong> property accepts PDF data as a <code>string</code> (base64 encoded), an <code>ArrayBuffer</code>, or a <code>Uint8Array</code>. You can import a blank A4 PDF using <code>BLANK_PDF</code> to see how it works. Alternatively, you can define an empty PDF as shown below. When using schemas—such as tables that require page breaks—ensure you specify the PDF in the following format:</p>
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">basePdf</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token property">&quot;width&quot;</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">210</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token property">&quot;height&quot;</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">297</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token property">&quot;padding&quot;</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>schemas</strong> can only utilize text by default, but you can load images and various barcodes like QR codes as plugins from the <code>@pdfme/schemas</code> package.<br>
<!-- -->Additionally, you can create your own schemas, allowing you to render types other than the ones mentioned above.<br>
<!-- -->Check detail about <a href="/docs/custom-schemas">Custom Schemas</a>.</p>
<p>Let&#x27;s take a look at some specific data.<br>
<!-- -->(If you are using TypeScript, you can import the Template type.)</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="minimal-template">Minimal Template<a href="#minimal-template" class="hash-link" aria-label="Direct link to Minimal Template" title="Direct link to Minimal Template">​</a></h3>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">BLANK_PDF</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> template</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> basePdf</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">BLANK_PDF</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> schemas</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> position</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> position</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;c&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> position</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>You can create a template from <a href="/template-design?ui=designer&amp;template=a4-blank">Template Design page</a>. Or, if you want to integrate the template creation feature into your application, check out the <a href="/docs/getting-started#designer">Designer section</a>.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="using-plugins">Using Plugins<a href="#using-plugins" class="hash-link" aria-label="Direct link to Using Plugins" title="Direct link to Using Plugins">​</a></h3>
<p>By default, examples often demonstrate the use of the <code>text</code> schema type. However, you can use other built-in schema types or even create your own custom schemas with the <code>@pdfme/schemas</code> package.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="step-1-install-pdfmeschemas">Step 1: Install <code>@pdfme/schemas</code><a href="#step-1-install-pdfmeschemas" class="hash-link" aria-label="Direct link to step-1-install-pdfmeschemas" title="Direct link to step-1-install-pdfmeschemas">​</a></h4>
<p>Install the necessary package to access additional schema types.</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">npm install @pdfme/schemas</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="step-2-use-built-in-and-custom-schema-types">Step 2: Use Built-in and Custom Schema Types<a href="#step-2-use-built-in-and-custom-schema-types" class="hash-link" aria-label="Direct link to Step 2: Use Built-in and Custom Schema Types" title="Direct link to Step 2: Use Built-in and Custom Schema Types">​</a></h4>
<p>Here’s an example of a template using both built-in and custom schema types:</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">BLANK_PDF</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> barcodes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> image </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/schemas&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> myCustomPlugin </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;./custom-plugins&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> template</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> basePdf</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">BLANK_PDF</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> schemas</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example_text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> position</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example_image&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;image&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> position</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example_qr_code&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qrcode&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> position</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> plugins </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> Text</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> multiVariableText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token string-property property">&#x27;QR Code&#x27;</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> barcodes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qrcode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> Image</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> image</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> MyCustomPlugin</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> myCustomPlugin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> inputs </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> example_text</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello, World!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> example_image</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;data:image/png;base64,iVBORw0KG....&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> example_qr_code</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://pdfme.com/&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">generate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> plugins </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">then</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pdf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pdf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="explore-built-in-schema-types">Explore Built-in Schema Types<a href="#explore-built-in-schema-types" class="hash-link" aria-label="Direct link to Explore Built-in Schema Types" title="Direct link to Explore Built-in Schema Types">​</a></h4>
<p>To view all supported built-in schema types, refer to the <a href="/docs/supported-features">Supported Features Documentation</a>.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="creating-custom-schema-types">Creating Custom Schema Types<a href="#creating-custom-schema-types" class="hash-link" aria-label="Direct link to Creating Custom Schema Types" title="Direct link to Creating Custom Schema Types">​</a></h4>
<p>If you need a schema type that isn’t built-in, you can define your own. Check out the <a href="/docs/custom-schemas#creating-your-own-schemas">Custom Schemas Guide</a> for detailed instructions.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="generator">Generator<a href="#generator" class="hash-link" aria-label="Direct link to Generator" title="Direct link to Generator">​</a></h2>
<p>The PDF generator function, <code>generate</code>, takes 2 arguments of <code>template</code> and <code>inputs</code> for generate a PDF. It works both in Node.js and in the browser.</p>
<p>The code to generate a PDF file using the <a href="/docs/getting-started#minimal-template">template created above</a> is shown below.</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> generate </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/generator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> template</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// skip...　Check the Template section.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> inputs </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> a</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> b</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;c1&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">generate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> inputs </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">then</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pdf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pdf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Browser</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// const blob = new Blob([pdf.buffer], { type: &#x27;application/pdf&#x27; });</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// window.open(URL.createObjectURL(blob));</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Node.js</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>You can create a PDF file like the below.</p>
<p><img decoding="async" loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC8YAAAbuCAMAAAAVSzpKAAAAb1BMVEUoKCj////9/f36+vr39/fz8/Py8vLw8PDr6+vk5OTc3NzW1tbV1dXS0tLHx8e+vr62traurq6mpqahoaGXl5eEhIR3d3dxcXFnZ2daWlpSUlJHR0c5OTkvLy8mJiYlJSUjIyMhISEXFxcJCQkAAAD5hGykAAAgdElEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmt45pAAAAEIY5wb9MPPDSilgGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAgwDshBAAHD1h5AMDDA04eADDxgJEHoOzdgU7TUBiG4f9UtjOcThRBw5DS+78sEkIwJEi2wKbdFBMNYVzAOeV5LuFLmr1tTldEPCDkAQAVDwh5AEDFAzoeAAYS8S3AMzoeAMqu+DHAi2Y6HgDKzficxQqwK+ep5/EAUGzFt3mUAHa8ydNWxwNAqRUv4wEZDwAyHhhOxut4ACjO2V/tuYwHZDy8Do0JYADO4lGKF+T9bB/gPx0PMh4oXz6cn57M7ABEJBOAjAdq8XAwMQLgcTzIeKCuX+Uvy+XWPAAg44EajP9d2ddXV7/MAQAyHihdOjjpvp2ffrAE8FRyqgZkPFDwmZo8P9xvIuXPOh4AZDxQi59Nf3t5cbuJ97YAABkPVGLz/eLmfn2ziDw2BgDIeKAS931EpD5CxgP+chIGbM8EMLRX2GaTUU5u0gFAxgP1mC6OYrvqp5YAABkP1CIff10t7jYTGQ8AMh6o5pjru6a/XtsE2JV81Bm84goUay8e1u7QAUDGA1XZxNsc8fEoHqWmaSKiaVzpACDjgYKtIs3n3afYxh/HXdeNYtZ1rWEAQMYDZUoRcfdjmyZpeel8/G/27mCniS4O4/B7Wj6m/YS0FrQGTaTG+78jE02MlgSVisVWymDEjXs2/SfPs+gFvIvJL5MzpwDgE1egjsvrw6z7fEySiwt7AICMByrYbm0AAA7VAAAAMh4AAJDxAAAg4wEAABkPAOyBZgKQ8QAAgIwHAABkPAAAyHgAAEDGAwAAMh4AAGQ8AAAg4wEAABkPAAAyHgAAkPEAAICMBwAAZDwAAMh4AABAxgMAADIeAABkPAAAIOMBAAAZDwAAMh4AAJDxAACAjAcAABkPAADIeAAAQMYDj9Xm82MrAICMB2o5OjpI/tXG42YWAJDxQB3teH5+dubRAAAyHihk+vzIcwEAZDxQy2693lgBAGQ8UMFgmL+ul8sbcwCAjAf23v305fn5q1PftQKAjAfqmJ6MWrrJCx0PADIeKGO4vfyw/Jn/J6YAABkPVLH+tNqtl32emAIAZDxQxbZP0v9I51QNAMh4oJa7tM4KACDjgVL65MAKACDjgVKGyS8rAICMB0o5SC/jAUDGA6V0T7KxAgDIeKCKySQZPWtZJWmDQXv4dWsNAMh4YJ8NTxf3L7usbpLuzWLxNHm9WMzsAgAyHthjy83gbfqvl0m8gweAAlwvB9y/S9Zdd/szf2zeWQQAZDxQw3ZrAwCQ8QAAgIwHAABkPAAAyHgAAEDGAwAAMh4AAGQ8AAAg4wEAABkPAAAyHgAAkPEAAICMBwAAGQ8AAMh4AABAxgMAgIwHAABkPAAAIOMBAAAZDwAAMh4AAJDxAACAjAcAABkPAADIeAAAQMYDAICMBwAAZDwAACDjAQBAxgMAADIeAAB4rIEJgEdq43GzAgDIeKCOdjw/PzvzKAEAh2qAQqYzGwCAt/FAMbv1emMFAJDxQAntvzy4Xi5vrAEADtUA+6+ddF27u/m6MwUAyHigiNHJKMnw+MIFNQDgUA1QxWyU60/vv/S+bgUAb+OBKqbjrC6Tq++9LQBAxgNFjNJfJYmKBwCHaoAyDrLxbSsAyHiglsPcGQEAZDxQy60nBwDIeKCaXT4bAQBkPFDLbd5OrQAAMh4o5eous0lyOJ8naYNBe/j1V1AA4MJJYI/tvp2009ntYctq073KH6+Tqy+WAYDf7NqxCYBAEETRUQSx//rMNRThWMXANu7gvRI2+gxrjQf6dR2VeZ3qrNjgAcAaDwyitWXL8yap3TUAQMYDg/huNwAATzUAAICMBwAAGQ8AAMh4AABAxgMAgIwHAABkPAAAIOMBAEDGAwAAMh4AAJDxAACAjAcAABkPAADIeAAAQMYDAICMBwAAZDwAACDjAQBAxgMAADIeAACQ8QAAIOMBAAAZDwAAyHgAAJDxAACAjAcAAGQ8AAAg4wEAQMYDAAAyHgAAkPEAACDjAQAAGQ8AAMh4AACQ8QAAgIwHAABkPAAAyHgAAEDGAwAAMh4AAGQ8AAAg4wEAABkPAAAyHgAAkPEAAICMBwAAZDwAAMh4AABAxgMAADIeAABkPAAAIOMBAAAZDwAAMh4AAJDxAACAjAcAABkPAADIeAAAQMYDAICMBwAAZDwAACDjAQAAGQ8AADIeAACQ8QAAgIwHAAAZDwAAyHgAAEDGAwCAjAcAAGQ8AAAg4wEAQMYDAAAyHgAAkPEAACDjAQAAGQ8AAMh4AACQ8QAAgIwHAABkPAAAIOMBAEDGAwAAMh4AAJDxAAAg4wEAABkPAADIeAAAkPEAAICMBwAAZDwAAMh4AABAxgMAADIeAABkPAAAIOMBAAAZD8DPbh0IAAAAAAD5vzZChara+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqjYeu3UgAAAAAADk/9oIFaqqqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjqwq7dSAAAAAAAOT/2ggVqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2njs1oEAAAAAAJD/ayNUqKqqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vKuzWgQAAAAAAkP9rI1SoauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+LBbBwIAAAAAQP6vjVChqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qsFsHAgAAAABA/q+NUKFq46uqqo2vqqqNr6qqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjw24dCAAAAAAA+b82QoWqqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqrCbh0IAAAAAAD5vzZChaqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqqo0Pu3UgAAAAAADk/9oIFaqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qgq7dSAAAAAAAOT/2ggVqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqjS/s1oEAAAAAAJD/ayNUqKpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqmrjq6pq46uqqo2vqqo2vqqqNr6qqtr4qqpq46uqauOrqqqNr6qqNr6qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqra+Kqq2viqqmrjq6qqja+qqo2vqqo2vqqq2viqqtr4qqpq46uqqo2vqqqNr6qqNr6qqtr4qqra+KqqauOrqqqNr6qqja+qqja+qqra+KqqauOrqmrjq6qqja+qqja+qqo2vqqq2viqKuzcwRGCMBBA0REtwQseFvsvi0YiQQYzxou3Fd87WEBmCF9YAsh4AACQ8QAAgIwHAABkPAAAyHgAAEDGAwAAMh4AAGQ8AAAg4wEAABkPAADIeAAAkPEAAICMBwAAZDwAAMh4AABAxgMAADIeAABkPAAAIOMBAAAZDwAAMh4AAJDxAACAjAcAABkPAADIeAAAQMYDAAAyHgAAZDwAACDjAQAAGQ8AADIeAACQ8QAAgIwHAAAZDwAAyHgAAEDGAwCAjAcAAGQ8AAAg4wEAQMYDAAAyHgAAkPEAACDjAQAAGQ8AAMh4AABAxgMAgIwHAABkPAAAIOMBAEDGAwAAMh4AAJDxAECjWAKQ8QAAgIwHAABkPAAAyHgAAEDGAwAAMh4AAGQ84DA5AEDGAwAAMh4AAGQ8AAAg4wEAn88AMh74bLYEACDjAQAAGQ94ZQ4AyHgAwCQeyHgAAEDGAwCG7gAZD3hBDgDIeADwzx+Q8QCAqRpAxgPfmV836eEC0DnbKEHGA7mftg0AnVPdIMzUgIwHshqrG0BrXFxtkCDjgbxTNcUELPCmlPpjZwAZD+RVtvs1wO5Z8sU5NXAwJ0sAhxD7Re3SBroDalQ8ACQVjam6A0yLaNksASCX6E3AX4uVigeA1GKj50G9r1Q8APyEAIhQ8QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADzYgwMBAAAAACD/10ZQVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVp105OAAZAKApah0tO9l9jICXkJsyU4OnxEQAAAAAAAAAAgL/GCQAA4Jp2AgAAOGbKDQAA4JhKezwAANzSlVHe4wEA4FjFR5Y9HgAALlX8bHSWQR4AAG6Yr+I3NjKrhTwAAJyI+Hx29wVDYJYg88WnaAAAAABJRU5ErkJggg==" width="3014" height="1774" class="img_ev3q"></p>
<p>Also, each element in the inputs array corresponds to a page in the PDF, you can create a multi-page PDF file by providing multiple elements of inputs.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="ui">UI<a href="#ui" class="hash-link" aria-label="Direct link to UI" title="Direct link to UI">​</a></h2>
<p>The UI is composed of the <a href="/docs/getting-started#designer">Designer</a>, <a href="/docs/getting-started#form">Form</a>, and <a href="/docs/getting-started#viewer">Viewer</a> classes.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="designer">Designer<a href="#designer" class="hash-link" aria-label="Direct link to Designer" title="Direct link to Designer">​</a></h3>
<p>The Designer allows you to edit the Template schemas, making it easy for anyone to create Template json objects.</p>
<p>You can design your own template from <a href="/template-design?ui=designer&amp;template=a4-blank">Template Design page</a>, or you can integrate the designer into your application.</p>
<p>Let&#x27;s integrate the designer using the template created above as the default template.</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Designer </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/ui&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> domContainer </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> document</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">getElementById</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;container&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> template</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// skip...　Check the Template section.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> designer </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">Designer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> domContainer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>The Designer class is instantiated as shown above, and the template designer is displayed in the <code>domContainer</code>.<br>
<!-- -->You can edit the template as shown below. The operation is like Google Slides, etc., so you can use common keyboard shortcuts.</p>
<p><img decoding="async" loading="lazy" src="/assets/images/designer-c8f32607bc8d0fe7b1c2c897381b7a45.gif" width="800" height="767" class="img_ev3q"></p>
<p>The designer instance can be manipulated with the following methods.</p>
<ul>
<li><code>saveTemplate</code></li>
<li><code>updateTemplate</code></li>
<li><code>getTemplate</code></li>
<li><code>onChangeTemplate</code></li>
<li><code>onSaveTemplate</code></li>
<li><code>destroy</code></li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="form">Form<a href="#form" class="hash-link" aria-label="Direct link to Form" title="Direct link to Form">​</a></h3>
<p>You can use templates to create forms and PDF viewers.</p>
<p>The Form creates a UI for the user to enter schemas based on the template.</p>
<p>You can try out the form that uses the invoice template from <a href="/template-design?ui=form-viewer&amp;template=invoice">here</a>.</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Form </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/ui&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> domContainer </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> document</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">getElementById</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;container&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> template</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// skip...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// This is initial data.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> inputs </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> a</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> b</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;c1&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> form </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">Form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> domContainer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> inputs </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><img decoding="async" loading="lazy" src="/assets/images/form-83ffd9adef857c2a39f13769f31ade51.gif" width="670" height="642" class="img_ev3q"></p>
<p>The form instance has a method <code>getInputs</code> to get the user&#x27;s input.</p>
<p>You can generate a PDF file based on the user&#x27;s input by passing the data you get from <code>getInputs</code> as inputs to generate, as shown in the code below.</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">generate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> inputs</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">getInputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">then</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pdf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> blob </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">Blob</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">pdf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buffer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> type</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;application/pdf&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> window</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">open</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token constant" style="color:rgb(130, 170, 255)">URL</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">createObjectURL</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">blob</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="viewer">Viewer<a href="#viewer" class="hash-link" aria-label="Direct link to Viewer" title="Direct link to Viewer">​</a></h3>
<p>Viewing a PDF file in a mobile browser is a pain, because it doesn&#x27;t display well in an iframe.</p>
<p>The Viewer is a byproduct of the Form development process, but it allows you to show your users a preview of the PDF file you will create.</p>
<p>Using the Viewer is basically the same as using the Form, except that user cannot edit it.</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">type</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Template </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/common&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Viewer </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@pdfme/ui&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> domContainer </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> document</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">getElementById</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;container&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> template</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> Template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// skip...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> inputs </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> a</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> b</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;c1&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> viewer </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">Viewer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> domContainer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> inputs </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><img decoding="async" loading="lazy" src="/assets/images/viewer-cd37197f23d7f18d8cf0fe04d47cbf57.png" width="1600" height="1600" class="img_ev3q"></p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="special-thanks">Special Thanks<a href="#special-thanks" class="hash-link" aria-label="Direct link to Special Thanks" title="Direct link to Special Thanks">​</a></h2>
<ul>
<li><a href="https://pdf-lib.js.org/" target="_blank" rel="noopener noreferrer">pdf-lib</a>: Used in PDF generation.</li>
<li><a href="https://github.com/foliojs/fontkit" target="_blank" rel="noopener noreferrer">fontkit</a>: Used in font rendering.</li>
<li><a href="https://mozilla.github.io/pdf.js/" target="_blank" rel="noopener noreferrer">PDF.js</a>: Used in PDF viewing.</li>
<li><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>: Used in building the UI.</li>
<li><a href="https://xrender.fun/form-render" target="_blank" rel="noopener noreferrer">form-render</a>: Used in building the UI.</li>
<li><a href="https://ant.design/" target="_blank" rel="noopener noreferrer">antd</a>: Used in building the UI.</li>
<li><a href="https://daybrush.com/moveable/" target="_blank" rel="noopener noreferrer">react-moveable</a>, <a href="https://github.com/daybrush/selecto" target="_blank" rel="noopener noreferrer">react-selecto</a>, <a href="https://daybrush.com/guides/" target="_blank" rel="noopener noreferrer">@scena/react-guides</a>: Used in Designer UI.</li>
<li><a href="https://github.com/clauderic/dnd-kit" target="_blank" rel="noopener noreferrer">dnd-kit</a>: Used in Designer UI.</li>
<li><a href="https://lucide.dev/" target="_blank" rel="noopener noreferrer">Lucide</a> Used in Designer UI and Schema&#x27;s icon.</li>
</ul>
<p>I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.</p>
<p>If you want to contribute to pdfme, please check the <a href="/docs/development-guide">Development Guide</a> page.<br>
<!-- -->We look forward to your contribution!</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="cloud-service-option">Cloud Service Option<a href="#cloud-service-option" class="hash-link" aria-label="Direct link to Cloud Service Option" title="Direct link to Cloud Service Option">​</a></h2>
<p>While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.</p>
<p><strong><a href="https://app.pdfme.com?utm_source=website&amp;utm_content=getting-started" target="_blank" rel="noopener noreferrer">Try pdfme Cloud - Hassle-free PDF Generation</a></strong></p>
<p>pdfme Cloud provides all the features of the open-source library, plus:</p>
<ul>
<li>PDF generation at scale without infrastructure management</li>
<li>Hosted WYSIWYG template designer</li>
<li>Simple API integration</li>
<li>Automatic updates and maintenance</li>
</ul>
<p>*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/pdfme/pdfme/tree/main/website/docs/getting-started.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/docs/supported-features"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Supported Features</div></a></nav></div></div><div class="col col--3"><div style="position:sticky;top:76px"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#introduction" class="table-of-contents__link toc-highlight">Introduction</a></li><li><a href="#installation" class="table-of-contents__link toc-highlight">Installation</a></li><li><a href="#template" class="table-of-contents__link toc-highlight">Template</a><ul><li><a href="#minimal-template" class="table-of-contents__link toc-highlight">Minimal Template</a></li><li><a href="#using-plugins" class="table-of-contents__link toc-highlight">Using Plugins</a></li></ul></li><li><a href="#generator" class="table-of-contents__link toc-highlight">Generator</a></li><li><a href="#ui" class="table-of-contents__link toc-highlight">UI</a><ul><li><a href="#designer" class="table-of-contents__link toc-highlight">Designer</a></li><li><a href="#form" class="table-of-contents__link toc-highlight">Form</a></li><li><a href="#viewer" class="table-of-contents__link toc-highlight">Viewer</a></li></ul></li><li><a href="#special-thanks" class="table-of-contents__link toc-highlight">Special Thanks</a></li><li><a href="#cloud-service-option" class="table-of-contents__link toc-highlight">Cloud Service Option</a></li></ul></div><div><div style="height:16px"></div><a href="https://app.pdfme.com?utm_source=website&amp;utm_content=banner-cloud" target="_blank" rel="noopener noreferrer" style="display:flex;flex-direction:column;align-items:center;color:white;text-decoration:none"><div style="background:linear-gradient(45deg, rgb(37, 194, 160), rgb(32, 166, 137));border-radius:12px;box-shadow:0 4px 15px rgba(37, 194, 160, 0.3);padding:16px;position:relative;overflow:hidden;transition:all 0.3s ease"><div style="position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255, 255, 255, 0.3);filter:blur(20px);z-index:0;top:-50px;left:-50px"></div><div style="position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255, 255, 255, 0.3);filter:blur(20px);z-index:0;bottom:-30px;right:-30px"></div><div style="position:relative;z-index:1"><div style="display:flex;align-items:center;font-weight:bold;font-size:16px;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap" style="margin-right:8px;font-size:24px;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1))"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span>Try pdfme Cloud</span></div><p style="color:rgba(255, 255, 255, 0.95);font-size:12px;text-align:center;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,0.1)">No setup needed. Create PDFs in seconds with pdfme Cloud!</p></div></div></a><div style="height:16px"></div><a href="https://app.pdfme.com/contact?utm_source=website&amp;utm_content=banner-support" target="_blank" rel="noopener noreferrer" style="display:flex;flex-direction:column;align-items:center;color:white;text-decoration:none"><div style="background:linear-gradient(45deg, rgb(113, 37, 194), rgb(32, 70, 166));border-radius:12px;box-shadow:0 4px 15px rgba(37, 194, 160, 0.3);padding:16px;position:relative;overflow:hidden;transition:all 0.3s ease"><div style="position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255, 255, 255, 0.3);filter:blur(20px);z-index:0;top:-50px;left:-50px"></div><div style="position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255, 255, 255, 0.3);filter:blur(20px);z-index:0;bottom:-30px;right:-30px"></div><div style="position:relative;z-index:1"><div style="display:flex;align-items:center;font-weight:bold;font-size:16px;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,0.1)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-life-buoy" style="margin-right:8px;font-size:24px;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1))"><circle cx="12" cy="12" r="10"></circle><path d="m4.93 4.93 4.24 4.24"></path><path d="m14.83 9.17 4.24-4.24"></path><path d="m14.83 14.83 4.24 4.24"></path><path d="m9.17 14.83-4.24 4.24"></path><circle cx="12" cy="12" r="4"></circle></svg><span>Technical Support &amp; Consulting</span></div><p style="color:rgba(255, 255, 255, 0.95);font-size:12px;text-align:center;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,0.1)">Need advanced solutions or professional guidance? Our pdfme experts are here to help.</p></div></div></a></div></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Documentation</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/supported-features">Supported Features</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/templates">Examples</a></li><li class="footer__item"><a class="footer__link-item" href="/template-design">Template Design</a></li><li class="footer__item"><a href="https://app.pdfme.com?utm_source=website&amp;utm_content=footer" target="_blank" rel="noopener noreferrer" class="footer__link-item">Try pdfme Cloud<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/pdfme/pdfme" target="_blank" rel="noopener noreferrer" class="footer__link-item">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://discord.gg/xWPTJbmgNV" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 pdfme</div></div></div></footer></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink