How to Create a Web-Based Document Viewer in Power Automate
There are several different HTML tags we can use to embed document viewers into our HTML files. We can use the <object> tag for images, videos, and other types of content (including more HTML), the <embed> tag for external resources (like PDFs or multimedia), and the <iframe> tag for securely isolating external content on our web page.
With the <iframe> tag, we can display content temporarily loaded into an external cloud container. This is ideal for scenarios where we want users on any given web page to view and/or securely download a document within a certain timeframe.
Create <iframe> Document Viewers in Power Automate
Using the Cloudmersive File Processing connector in Power Automate, we can fill HTML web page templates with temporary <iframe> document viewers without writing a line of code. These viewers give users all the tools they need to read, download, and even print PDF documents directly from a web page.
In this article, we’ll build an example flow that loads a PDF document into a secure temporary cloud stash, encloses the document URL in an <iframe> tag, and returns that tag to our flow. We’ll then dynamically replace a placeholder string in a separate HTML template document with our <iframe> string. In the end, we’ll have a web page that looks like the below example:
We’ll build an instant cloud flow in this context so we can have full control over our data when we run our test.
We’ll start by getting an example document (in my case, a Lorem Ipsum PDF) and our HTML template (in my case, a short example page with pre-set CSS formatting for my <iframe> tag) from our file system. To make this demonstration easier to follow along with, I’ve included the exact HTML & CSS I’m using in my HTML template below.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content {
max-width: 800px;
margin: 0 auto;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.iframe-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.iframe-container iframe {
width: 100%;
max-width: 720px;
height: 480px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to Our Service!</h1>
<p>We're excited to have you on board. Below is a personalized experience just for you:</p>
<div class="iframe-container">
<!-- Replace the placeholder with your iframe tag dynamically -->
{{IFRAME_PLACEHOLDER}}
</div>
<p>If you have any questions, feel free to contact our support team.</p>
<p>Best regards,<br>Your Company</p>
</div>
</body>
</html>In my example, I’m using two Get file content actions to grab demo files from a OneDrive for Business folder.
Next, we’ll load our example document into an <iframe> tag as a temporary document URL — all in one quick action.
To find this action, we’ll first search Power Automate’s connector library for Cloudmersive connectors and locate the Cloudmersive File Processing connector on that list.
If the Create a web-based viewer action shows up first on our actions-list preview, we can go ahead and select it right away. If not, we can click “See more” to enumerate the full actions list, and we’ll find the Create a web-based viewer action near the top.
After selecting this action — and before we can begin configuring our request parameters — we’ll need to create our Cloudmersive File Processing connection and authorize it with a Cloudmersive API key. We can get a free API key (this allows up to 800 API calls per month with zero commitments) by creating a free account on the Cloudmersive website.
Once that’s out of the way, we’ll satisfy both request parameters with our document content and name. Note that we do NOT need to use the real file name in our request (in my example, I’ve used the name “file.pdf”).
Now that we’ve generated our <iframe> document viewer, we’ll add one more Cloudmersive File Processing action into our flow to dynamically fill in our HTML template.
This time, we’ll locate an action called Replace a string in text with another string value on the File Processing actions list and select it once we find it.
We’ll click “Show all” to view the request parameters, and we’ll then enter our HTML template content, placeholder string, and replacement string (<iframe> tag) in the Request/TextContent, Request/TargetString, and Request/ReplaceWithString parameters respectively.
Finally, we’ll add a Create file action to our flow, and we’ll save our adjusted HTML template as a new .html file.
Now we’ll save and test our flow.
When our flow finishes running, we’ll find and open our new HTML document in our web browser.
If we used the HTML template provided earlier on, we should end up with a document viewer that looks exactly like this one.
Our document is loaded into a temporary URL that will expire after 30 minutes, giving system users enough time to access and download their file from a secure web page.
