Image Convert to PDF in Oracle Apex - Javainhand Tutorial

Image Convert into PDF in Oracle Apex

Hello Friends,

In this Oracle APEX Tutorial, I will tell you, How to convert image file into PDF in Oracle APEX.

Basically, can we convert table image file into PDF and download that pdf file into the system. then I have done with my way if you have any other way then you can also share with comment.

Note:-First learn how to make Image URL in Oracle APEX. The below link will help you.

How to Make an image URL in Oracle APEX

Let's Start
Step 1:-Create a Classic Report Type Region below screenshot will help you.

select 
EMPNO,
ENAME ,
mimetype,
 EMPNO as VIEW1
from EMP
where ENAME is not null

and mimetype='image/jpeg'

As you have seen in the above screenshot with red marks we are creating region and also create two hidden items P8_EMPNO and P8_PDF_URL.

Step 2:-Change VIEW1 column properties with Link Type. The below screenshot will help you.

Step 3:-Change Column Link Properties below screenshot and code will help.

Target:-  javascript:void(null);
Link Text:- <span class="t-Icon fa fa-eye VIEW" aria-hidden="true"></span>
Link Attributes:- data-id=#VIEW1#

Step 4:- We are using jsPDF to Convert Image into PDF use below URL into Javascript FILE URL Section.

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js

Step 5:-Use below Code for Convert image into base64 in Function and Global Variable Declaration.

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

Step 6:- Create a Click Dynamic Action.below screenshot and code will help.

Event:- Click
Selection Type:- Jquery Selector
Jquery Selector:- VIEW

After Creating Click Event Now define True Action.

1.Set Value True Action below screenshot and code will help you.

$(this.triggeringElement).parent().data('id')

Don't forget to add Affected Element 

2. Execute Javascript Code below screenshot and code will help you.

var base64Img = null;
var str = apex.item( "P8_EMPNO" ).getValue();
 console.log(str);
var str1='you can pass your image URL'+str;
apex.item( "P8_PDF_URL" ).setValue(str1);
toDataURL(str1, function(dataUrl) {
        var sometext1 = "Image Convert Into Pdf";
var pdf = new jsPDF();
        pdf.setFontSize(40);
        pdf.text(sometext1, 35, 25);
        pdf.addImage(dataUrl, 'JPEG', 15, 40, 180, 160);
pdf.save('Test.pdf');
});

3.Submit Page True Action below screenshot will help you.

Reference:-
jsPDF

If You Like This Tutorial Please Like Share And Comment.