Hướng dẫn encodian html to pdf

Encodian provide two actions which enable you to convert HTML Data, a URL and HTML document’s to either a PDF document or Microsoft Word document (DOCX):

• Convert HTML to Word
• Convert HTML to PDF

These actions are very popular and this short post provides the following tips for the most common questions we receive from our customers via support and the Power Automate community.

• Adding Flow Dynamic Data to HTML in Power Automate
• Adding Images to HTML in Power Automate
• Adding Page Breaks to HTML in Power Automate

Adding Flow Dynamic Data to HTML in Power Automate

Embedding data within HTML documents using standard Power Automate features requires complex expressions which also inhibit your ability to view the HTML data. Not only is this tricky to do, HTML / CSS standards support is also minimal compared to the Encodian HTML conversion actions.

The Encodian Convert HTML to PDF action makes it very easy to interlace HTML with Flow dynamic data.

The following flow snippet shows a Flow which is triggered everytime a new item is added to the SharePoint ‘Marketing Contacts‘ list;

Every time this trigger event is fired I need to create a new PDF document containing information about the new contact and send as an email attachment simple!

1. Add the Encodian Convert HTML to PDFaction

1.a. PDF Filename: Enter the name of the output PDF document, optionally using Flow dynamic data.

1.b. HTML Data: Enter your HTML markup

1.c. Replace the placeholder text: Select the target text, locate the field from flow dynamic data and select

1.d. Repeat for all target fields

2. Add a ‘Send Email‘ and configure as required;

Adding Images to HTML in Power Automate

Building upon the previous example we’ll show two separate options for adding images into the output document.

Add Images to HTML via a URL

The easiest solution would be to add an

However, this approach only works where the image linked to within the URL is publicly and anonymously accessible . The Encodian connector is not authorized (By Design) to access and retrieve data from your Microsoft 365 tenant.

Add Images to HTML via a DataURI

If you would like to add an image which is stored within your Microsoft 365 tenant (OneDrive, SharePoint, PowerApps) or another secured storage location (Box, Azure, etc.) then we need to use a DataURI following these simple steps:

1. Add a ‘Get file content‘ action relating to the storage location of your image file and configure accordingly. For this example, I have added the ‘Get attachments‘ and the ‘Get attachment content‘ actions to get the first attachment present on the newly created list item.

Power Apps: If you are providing image files from PowerApps you can omit step 1 as the file would be provided to Power Automate encoded as a Base64 string already, skip to step 2.

The following expression is used within the ‘Get attachment content‘ actions ‘File Identifier‘ property to obtain the first attachment’s ‘File identifier‘ property: body(‘Get_attachments’)[0][‘Id’]

As per other ‘Get File Content‘ type actions, the ‘Get attachment content‘ action will return the file (Base64 encoded) and we’ll use this value to create the DataURI.

2. Add a ‘Compose‘ action

2.a. Inputs: Enter the following expression

dataUri(base64ToBinary(base64())) 

2.c. Place your cursor inside the base64() parentheses and then pass your file content property.

3. Locate the target IMG tag within your HTML, change the SRC attributes value by passing the output of the compose action.

Upon executing the Flow the image will embedded within the HTML as a DataURI.

Adding Page Breaks to HTML in Power Automate

The last tip in this post covers how to create page breaks within your HTML and output document.

Inserting page breaks in HTML is completed using one of the following CSS properties:

• page-break-after
• page-break-before

I have added the following CSS class to the existing HTML mark-up used within this article:

 .newPage {page-break-before: always;}

I have then added a class reference on the relevant HTML element to insert the page break at the desired location:

The resulting PDF document with the page breaks honored:

Finally…

We hope you’ve found these quick tips useful, and as ever, please share any feedback or comments – all are welcome!