Converting HTML to PDF or Word with Power Automate

July 6th 2020
Back to all blogs

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):

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

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;

Convert HTML to Word

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 PDF action

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

Convert HTML to Word

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 <img> tag setting the src attribute to the URL of the image you’d like to add:

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()))

Convert HTML to Word

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

Convert HTML to Word

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

Convert HTML to Word

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:

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:

Convert HTML to Word

Finally…

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

Author
Jay Goodison

Managing Director

Back to all blogs

You might also be interested in...