FastReport with image - Export to HTML wth images from external URL

General
1

When sending a report via email, we normally export to PDF and attach that file to the email. We now need to show the report in the body of the email. No PDF attachment.

To do this, we export the report to HTML and assign the resultant HTML to the body of the email. This works well except for images. Like HTML emails we all get, we want to images to be loaded from a web server. We know the image URL at design time.

The issue is that FastReports gets the image from the server and writes it to a folder. It is this local image that is referenced in the exported HTML like so: <img width=606 height=392 src="Test_HTML_Image_files/image002.png"

What we want is for the exported HTML to reference the image via the URL like so: <img width=606 height=392 src="https://xxxx.com.au/uploads/yyy/mm/zzz.jpg">

I have tried both frxPictureView and frxHTMLView components without success.

How can I “pass through” an image URL to the exported report HTML?

Many thanks!

2

To pass through an image URL to the exported report HTML in FastReports, you’ll need to customize how FastReports handles the image rendering during the export process. Here’s a step-by-step approach to achieve this:

1. Use a Custom Script or Event in FastReports:

You can use the OnBeforePrint event of the frxPictureView component to dynamically set the Picture property using a URL instead of a local file path.

2. Assign the Image URL Directly:

In your report design, instead of embedding the image directly into the report, you can assign the URL directly to the Picture property. However, since FastReports typically saves the image locally during export, you’ll need to override this behavior.

3. Modify the Export Process:

If the built-in components like frxPictureView or frxHTMLView don’t provide the desired behavior, you can customize the HTML export by handling the image references manually.

Example Approach:

  1. Use a frxMemoView Component for the Image: You can use a frxMemoView component to inject the <img> HTML tag directly.
  • Set the frxMemoView component’s Text property to include the HTML image tag with the desired URL:

html

Copy code

<img width="606" height="392" src="https://xxxx.com.au/uploads/yyy/mm/zzz.jpg">
  • Ensure that the frxMemoView component’s Text property is rendered as HTML by enabling the AllowHTMLTags property.
  1. Handle Dynamic URLs: If the URL needs to be dynamically generated or updated at runtime, you can do this via the report’s script or event handling mechanism:

pascal

Copy code

procedure frxMemoView1OnBeforePrint(Sender: TfrxComponent);
begin
  TfrxMemoView(Sender).Text := 
    '<img width="606" height="392" src="https://xxxx.com.au/uploads/' + 
    FormatDateTime('yyyy/mm', Date) + '/zzz.jpg">';
end;
  1. Export the Report to HTML: When exporting to HTML, FastReports will include your custom <img> tag with the URL directly in the HTML, and the images will be referenced from the server rather than from a local directory.

4. Post-Processing the HTML (Optional):

If you still need to use the frxPictureView or frxHTMLView components and can’t directly inject the image URL, consider post-processing the exported HTML. You could use a simple script or a text replacement method to replace local image paths with your desired URLs after exporting.

5. Custom Export Filter (Advanced):

As an advanced solution, if none of the above methods fit your requirements, you could create a custom HTML export filter in FastReports that explicitly controls how image URLs are handled during the export process.

This approach should help you pass through image URLs to your exported HTML report, ensuring that the images are loaded from your web server when the report is displayed in the body of an email.