47
Views
8
Comments
Solved
Print images that are stored as binary data in variable
Application Type
Reactive

Hi, I need to print list of images stored in a variable of type Binary Data List. These images on click of a button should be sent to print popup (windows.print()). 

Context:

On click of a button, list of images should be sent to print popup. Images are arranged one below the other (the same way it is arranged in the variable). 

The images are in a variable of Binary Data List. 

I tried to print using below code, but it didn't work. (JSFiddle link)

var win = window.open('');
win.document.write(''<img src="' + $parameters.ImageSRC + '" onload="window.print();window.close()" />'');
win.focus();

It opened another window but since the url needs an extension (.jpg or .png etc), it doesn't load the image for printing.

Regards,
Aman

2024-04-15 16-08-47
Aman Devrath
Solution

This problem took a lot of my time. 

All of PDFs were in Base64 format, coming from APIs. I couldn't send all of the PDFs to print function. Print function would only pick the first bill from the selected bills. 

Only way was to merge the PDFs and then send the merged PDF to print function.

1. I had a list of PDFs (Binary data) in a list. I used PDF Helper component. Using this component, I merged all the PDFs using JoinPDF action from this component.

2. After this, I sent all merged PDFs to PrintJS (A JS library to help printing from the web). This library sent merged PDFs to print function.

in the below image, I passed merged PDF to "printable" parameter to print out the merged PDFs

Important Note: I had to add base64: true because all of my PDFs were in base64 format coming from APIs.


Thanks,
Aman

2023-02-20 05-20-57
Nam Nguyen

Hi,


Can you share the value that is assigned to ImageSRC ?

2024-04-15 16-08-47
Aman Devrath

Hi,

I'm assigning binary data to the ImageSRC. 

ImageSRC = BillImages.Current

2023-02-20 05-20-57
Nam Nguyen


I met a similar case before. 

OS binary data is different from browser binary data. So that browser can not read it.

You should convert your binary to base64  then assign it into your JS block. Use URL.createObjectURL() to generate url for assigning your img src. 

Cheers,
Nam 




2022-12-30 09-46-57
Deepika Patel

Hi,

Can you share the OML?

Thanks,

2024-04-15 16-08-47
Aman Devrath

Hi,

Please find OML

PrintImages.oml
2022-12-30 09-46-57
Deepika Patel

Hi @Aman Devrath,

when the popup open add JavaScript "window.print()" and add the list in popup in which images are assigned. Refer below screenshots:

Hope this helps!

Thanks,

2024-04-15 16-08-47
Aman Devrath

Hi Deepika,

I'm working on reactive App, I can't use preparation.

Also, I don't want to display images on popup. directly on print display.


Thanks,
Aman

2024-04-15 16-08-47
Aman Devrath
Solution

This problem took a lot of my time. 

All of PDFs were in Base64 format, coming from APIs. I couldn't send all of the PDFs to print function. Print function would only pick the first bill from the selected bills. 

Only way was to merge the PDFs and then send the merged PDF to print function.

1. I had a list of PDFs (Binary data) in a list. I used PDF Helper component. Using this component, I merged all the PDFs using JoinPDF action from this component.

2. After this, I sent all merged PDFs to PrintJS (A JS library to help printing from the web). This library sent merged PDFs to print function.

in the below image, I passed merged PDF to "printable" parameter to print out the merged PDFs

Important Note: I had to add base64: true because all of my PDFs were in base64 format coming from APIs.


Thanks,
Aman

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.