Answered

Pdf creation failing to add the image

(0) Share

Report

Posted on by MIA27

While composing the html for creating html file and then converting to pdf, whole html is working fine, it creates the file, but the logo is not picked by the code. Below is the portion of the code used for Img and result of pdf created.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="D:\AllMasterBackUp\Images\gal-logo.png" alt="companylogo" height="100px" width="100px" />
<pre>
<b>

Result of html - converted to pdf

Please advise what correction of the html I should do, so that the image can be picked and to be at the right side of page.

I wanted to keep the company details as shown above in left side and on the right side the image

Categories:

Building flows

I have the same question (0)

All responses (10)

Answers (1)

Verified answer

CFernandes 8,402 Most Valuable Professional on at

Like (1)

Report

Hey @MIA27

You will need to Convert the image to BASE64 and then add it to your HTML.

You can convert ImagetoBase64 using any option tool - e.g. https://base64.guru/converter/encode/image

example -

<div> <p>Taken from wikpedia</p> <img src="data&colon;image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> </div>

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

P.S. take a look at my blog here and like & subscribe to my YouTube Channel thanks.

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Thank you so much, open the website, selected the file and output selected the option Output Html Image, copied and pasted exactly and later added the height, its working.
The requirement is to put the image as a a floating right of the text on the top corner, but the code is not working as required, it stays as it is, the style does not get implement.

<img alt="" src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAABMCAIAAACj7r...........................
...... pMfXn7yw8tPfnoS+n8DABizLRtwPqZQAAAAAElFTkSuQmCC" style="float:right" height="40px" />

<pre>
<b>

Note: I shorted the code with ...... as it is very lengthy, so paste start and end to show you.

As all the code has to be in the compose screen, so cannot write separate CSS file.

Please guide what correction to be done to code to obtain the requirement.

Was this reply helpful? Yes No
CFernandes 8,402 Most Valuable Professional on at

Like (0)

Report

@MIA27 So the original image problem has been resolved.

Can you write CSS like this https://www.w3schools.com/cssref/tryit.php?filename=trycss_float

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

P.S. take a look at my blog here and like & subscribe to my YouTube Channel thanks.

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

yes, Thank you, original problem is solved. I marked it Accept as solution.

But, I am still not able to obtain the required position of the image, I opened the link as you advised, took the code and applied, all is working fine but the position is still left and little move due to 15pxl, cannot understand my mistake, I also took a chance of using <div>, but still the same. Also to note I have to use <pre> instead of <p> as i want my spaces to maintained as I want. It seems that Float:right is not getting applied.
Could not understand, Do we need to declared the size of the body to A4 size, so that it can get applied.
Need you advise, please guide

Below is my code in use:

<!DOCTYPE html>
<html>
<head>
</head
>
<body>
<style>
img {
float: right;
}
</style>
<div>
<pre>
<img alt="" src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAABMCAIAAACj7r86.............twPqZQAAAAAElFTkSuQmCC" style="height:45px;margin-left:15px;">
<b>
& HEAVY EQUIPMENTS CO. LTD </b>
Post Box No. ates
Tel. +559800
</pre>
</div>

</body>
</html>

Result of the created pdf is as below:

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Dear Mr. Fernandes,
Just to check further, I pasted the complete code in the note pad by file name .html and run it.
Found difference, In this way the page is responsive and the image is on the right side, while in the created pdf it is not on the right side.
But Image should be next to the text, not the first image and then the text. attached is the result file run from note pad

This indicates the code, need to be modified and A4 declaration is important, not sure, my guess.
Please check these difference and advise

Was this reply helpful? Yes No
CFernandes 8,402 Most Valuable Professional on at

Like (0)

Report

@MIA27 - What is the action you are using to "Convert HTML to PDF" is it OneDrive action? From what I know we its all about CSS magic and you will need to add inline CSS...

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

On Button click event in powerApp, the powerautomate triggers, to collect the data of the screen and create pdf where sharepoint list is involved. Below is the powerautomate screen .
Please note in the compose action the whole html code I am writing, all going on fine, only I am stuck in handling the company details of the left and company logo on the right.

please advise

Was this reply helpful? Yes No
CFernandes 8,402 Most Valuable Professional on at

Like (0)

Report

@MIA27 I will do some tests and get back to you on this one...

Was this reply helpful? Yes No
MIA27 2 on at

Like (0)

Report

Thank you. Noted. I will wait.

trying/ just google and try, came across an idea mentioned
https://stackoverflow.com/questions/60521219/how-to-put-images-and-text-inside-boxes-html-css

to create two container one for the text and for the image and place the position by css coding but within html coding page (as you know I are writing in compose screen). so that can be side by setting and within it margin. as max we have to keep the within 294x210 mm

I am very much new in html coding. I am doing a project, where we are trying to shift our database from MS access to PowerApp. As the Ms access has a report where we use to design the print outs, but here we have one option of creating pdf, if any documentation print is required. So I am using this method as shown in flow to get thing done.

Hope we will fix it and I will learn also by Guru Fernandes

Was this reply helpful? Yes No
CFernandes 8,402 Most Valuable Professional on at

Like (0)

Report

@MIA27 - CSS are getting ignored by the "Convert file" OneDrive when convert the same using a third party connector it works fine... The third party connector I used is Muhimbi. Note Muhimbi Connector is a paid connector.

Sample HTML

<!DOCTYPE html>
<html>
<head>
</head
>
<body>
<style>
img {
float: right;
margin-left:20%;
height:45px;
}
b {
float: right;
margin-left:80%;
}
</style>

<div>
<pre>
<img alt="" src="https://clavinfernandes.files.wordpress.com/2020/06/clavin.jpeg?w=300">

<b>
& HEAVY EQUIPMENTS CO. LTD
Post Box No. ates
Tel. +559800</b>
</pre>
</div>

</body>
</html>

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

P.S. take a look at my blog here and like & subscribe to my YouTube Channel thanks.

Was this reply helpful? Yes No