1. Download javascript library file from here-
https://drive.google.com/file/d/19KyEFcDYSYJr06f6h2O4TQOHpDuJhwIY/view?usp=sharing
or
https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js
2. Open your apex application and click on the "Shared Components" icon.
3. Go to the "Files and Reports" section and click on the "Static Application Files" link.
4. Click on the "Create File" button.
5. Click on the "Drag and Drop Files" box.
6. Now select javascript library file which you download in step 1 and click "Create" button.
7. Now go the application back and create a blank page.
8. Create a region.
9. Add an item under this region.
NAME: P14_UPLOAD_FILE
Allows Multiple Files: Yes
10. Create 3 button (BTN_UPLOAD, BTN_CONVERT, BTN_DOWNLOAD) under this region.
11. Set buttons properties as your wish or follow video.
12. Create another region for display uploaded image. Set it's properties as like below-
NAME : Display Uploaded Image
Type : Dynamic Content
PL/SQL Function Body Return a clob:
DECLARE
l_clob CLOB;
BEGIN
l_clob := l_clob||'<div id="image-preview"></div>';
RETURN l_clob;
END ;
13. Select the page and go to the "Function and Global Variable Declaration". Open editor and paste the below code-
let uploadedImages = [];
function handleImageUpload(event) {
const imagePreview = document.getElementById('image-preview');
imagePreview.innerHTML = ''; // Clear previous preview
const files = event.files;
uploadedImages = []; // Clear previous uploaded images
for (let file of files) {
const reader = new FileReader();
reader.onload = function(e) {
const imgElement = document.createElement('img');
imgElement.src = e.target.result;
imagePreview.appendChild(imgElement);
// Add image data to uploadedImages array
uploadedImages.push(e.target.result);
};
reader.readAsDataURL(file);
}
}
async function mergeImagesIntoPDF(stats) {
if (uploadedImages.length === 0) {
alert('Please upload some images first!');
return;
}
// Create a new PDF document
const pdfDoc = await PDFLib.PDFDocument.create();
// Loop through all uploaded images and add them to the PDF
for (let imgDataUrl of uploadedImages) {
const imageBytes = await fetch(imgDataUrl).then(res => res.arrayBuffer());
let image;
if (imgDataUrl.startsWith('data:image/png')) {
image = await pdfDoc.embedPng(imageBytes);
} else if (imgDataUrl.startsWith('data:image/jpeg')) {
image = await pdfDoc.embedJpg(imageBytes);
}
const { width, height } = image.scale(1);
// Add a new page with the dimensions of the image
const page = pdfDoc.addPage([width, height]);
// Draw the image on the page
page.drawImage(image, {
x: 0,
y: 0,
width: width,
height: height
});
}
// Serialize the PDF to bytes
const pdfBytes = await pdfDoc.save();
// Create a blob and download link
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
if (stats === 'D') {
const link = document.createElement('a');
link.href = url;
link.download = 'merged-images.pdf';
link.click();
// Clean up the URL object
URL.revokeObjectURL(url);
} else {
apex.item('P14_PDF_FILE_URL').setValue(url);
apex.region('display-pdf').refresh();
}
}
14. Add css into the "CSS -> Inline" section. Open editor and paste the below code-
img {
margin: 3px;
}
15. Create a dynamic action under the "BTN_UPLOAD" button. Set properties like below-
NAME : Display Image
True Action : Execute javaScript Code
Code : handleImageUpload(P14_UPLOAD_FILE_FILE);
16. Select Page and go to the "Javascripts-> File RULs" Section.Add the below link here-
#APP_FILES#pdf-lib.min.js
17. Create another dynamic action under the "BTN_CONVERT" button. Set properties like-
NAME : Show PDF
True Action: Execute javaScript code-
Code : mergeImagesIntoPDF('S');
18. Create another dynamic action under the "BTN_DOWNLOAD" button. Set properties like-
NAME : Download PDF
True Action: Execute javaScript code-
Code : mergeImagesIntoPDF('D');
19. Create an item and set it's properties like-
Name: P14_PDF_FILE_URL
Type: Hidden
Value Protected:No
20. Create another region and set it's properties like below-
Name: Display PDF
Template: Inline Dialog
21. Create a sub region under this region and set it's properties like below-
Name : Report Container
Type : Interactive Report
Sql Query : SELECT '<iframe width="100%" src="'||:P14_PDF_FILE_URL||'"></iframe>' AS report FROM dual;
Page Items to Submit: P14_PDF_FILE_URL
Static Id : display-pdf
22. Select the report's column and set it's properties like below-
Heading:
HTML Expression: <iframe width="100%" src="&P14_PDF_FILE_URL."></iframe>
23. Select "BTN_CONVERT" and add another true action under "Show PDF" dynamic action. Set properties like-
Add another true action to open the popup dialog.
True Action : Execute javaScript Code
Code : this.affectedElements.dialog('open');
Selection Type : Region
Region : Display PDF
Comments
Post a Comment