Skip to main content

Embedding PDF Document

Two commonly used options for Sharing a PDF are providing a link to download the file directly from a server or sending it as an attachment in an email.

While this solution is usually sufficient for the personal needs of an individual user, it’s not a practical option for even a small-scale business when it comes to public-facing document management. By embedding PDFs in HTML, you can keep your documents within your secure application environment where you have full control over how they’re managed, shared, and viewed.

To embed an PDF document on the website,

  1. Select Embed PDF Document option from the drop down.

Docusaurus

  1. Click on Embed PDF Document button and this will show you a popup where you can upload a PDF document or select an existing PDF document.

Docusaurus

  1. Select the document you want to add and click on the Select button. And that's it!!

And that's it!

Displaying embedded PDF#

Displaying embedded PDF is very simple.

In your twig file, add

// entries.asset is the Craft CMS field name{{ entries.asset.render() }}

Rendering options#

The render() function accepts parameters which will be passed directly to the rendered output tag.

So for instance, the below code

// entries.asset is the Craft CMS field name{{ entries.asset.render({'class':'row-flex col-sm-3','hello':'world'}) }}

will result in 

<div class="row-flex col-sm-3" hello="world">    <canvas ...></canvas>    <div class="onepluginfields-pdf-btns">        <button class="btn previous">Prev</button>        <div class="page-wrapper">            <span class="page">1</span>            <span> / </span>            <span class="page">6</span>        </div>        <button class="btn next">Next</button>    </div></div>

Having said that, there is an exception.

Setting the height and width of the output elements inline is not a commonly preferred approach. But if you have no choice, you can pass the width and height parameters along with an extra attribute called size, value of which should be set to true.

// entries.asset is the Craft CMS field name{{ entries.asset.render({'size':true,'width':'100px','height':'100px'}) }}

will result in 

<div style='width:100px;height:100px;">    <canvas ...></canvas>    <div class="onepluginfields-pdf-btns">        <button class="btn previous">Prev</button>        <div class="page-wrapper">            <span class="page">1</span>            <span> / </span>            <span class="page">6</span>        </div>        <button class="btn next">Next</button>    </div></div>

Available Twig Methods#

type() - Returns string 'pdf'.

// entries.asset is the Craft CMS field name{{ entries.asset.type() }}