Create Image from PDF: Reactive Web App - Outsystems

I do have requirement that I want to display thumbnail image of PDF. PDF may have multiple page but I want to display thumbnail image of PDF's first page.

https://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons - I used this link and utilize pdf.js file which do create image from first page of PDF file.

Project do contains reference of required JS files. I did created 2 client actions . One client action do take PDF stream as input parameter and provide you binary data. Other client action do take PDF URL as input and provide image binary data.

Project also contains test page which do contains test page through which you can test both this method.

Consideration:

1. if you are going to use both this JS file, outsystem do convert the JS file name when you import it to your project. Thus you need to find the PDF.JS file for Pdf_worker.js reference and need to update it with runtime JS file name of pdf_worker.js

2. Its only work with PDF URL which are in same domain. Still code do not have CORS support.

I don't think javascript is able to generate a thumbnail from a PDF file. If you realy need to you will have to create an extention for it where you put in the pdf an recieve a thumbnail image back.

implementing below in the exention should do the trick.

https://social.msdn.microsoft.com/Forums/en-US/4c380697-4b7f-411d-b501-d9dece02973e/how-to-convert-the-first-page-of-pdf-to-thumbnail-image?forum=winforms

I would however store the thumbnail in your database or on disk for performence reasons.

Danny Prager wrote:

I don't think javascript is able to generate a thumbnail from a PDF file. If you realy need to you will have to create an extention for it where you put in the pdf an recieve a thumbnail image back.

implementing below in the exention should do the trick.

https://social.msdn.microsoft.com/Forums/en-US/4c380697-4b7f-411d-b501-d9dece02973e/how-to-convert-the-first-page-of-pdf-to-thumbnail-image?forum=winforms

I would however store the thumbnail in your database or on disk for performence reasons.


Hi Danny,

Thanks for the response. I actually able to implement that functionality using this JS within reactive web app.

I just want to share that with other and thus I did created this post. Attached OML file do contains complete source code with test page on how to do that.

I require to tweak JS and assemble many peaces but finally I am able to achieve it and thus want to share it as I was not able to find any component in forge for this specially for reactive web app.

Dharnendra Shah wrote:

Danny Prager wrote:

I don't think javascript is able to generate a thumbnail from a PDF file. If you realy need to you will have to create an extention for it where you put in the pdf an recieve a thumbnail image back.

implementing below in the exention should do the trick.

https://social.msdn.microsoft.com/Forums/en-US/4c380697-4b7f-411d-b501-d9dece02973e/how-to-convert-the-first-page-of-pdf-to-thumbnail-image?forum=winforms

I would however store the thumbnail in your database or on disk for performence reasons.


Hi Danny,

Thanks for the response. I actually able to implement that functionality using this JS within reactive web app.

I just want to share that with other and thus I did created this post. Attached OML file do contains complete source code with test page on how to do that.

I require to tweak JS and assemble many peaces but finally I am able to achieve it and thus want to share it as I was not able to find any component in forge for this specially for reactive web app.

Cool! Dit not ecpext it to work but seems it does. Just add it to the forge if you want to share.


Solution

Danny Prager wrote:

Dharnendra Shah wrote:

Danny Prager wrote:

I don't think javascript is able to generate a thumbnail from a PDF file. If you realy need to you will have to create an extention for it where you put in the pdf an recieve a thumbnail image back.

implementing below in the exention should do the trick.

https://social.msdn.microsoft.com/Forums/en-US/4c380697-4b7f-411d-b501-d9dece02973e/how-to-convert-the-first-page-of-pdf-to-thumbnail-image?forum=winforms

I would however store the thumbnail in your database or on disk for performence reasons.


Hi Danny,

Thanks for the response. I actually able to implement that functionality using this JS within reactive web app.

I just want to share that with other and thus I did created this post. Attached OML file do contains complete source code with test page on how to do that.

I require to tweak JS and assemble many peaces but finally I am able to achieve it and thus want to share it as I was not able to find any component in forge for this specially for reactive web app.

Cool! Dit not ecpext it to work but seems it does. Just add it to the forge if you want to share.


Thanks again for appreciation. I did added it as my first component at Forge https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=7545.


Solution