Oracle Apex PDF Viewer - oracle

Question

i am new in Oracle-Apex. I need Help to show a PDF in Oracle APEX. I have a question: I have uploaded the PDF in to the Database. I save the PDF as a blob in database. After that i showed the name of the PDF in Classic Report.When i click on the name, i want to see the preview of the PDF that i had uploaded.
Now i am searching a way to show the PDF with a Code. Can somebody help?
I need previous and next button.
How can i show this PDF in the Region?here is my Page

Answer 1

Here's an example I quickly whipped up using APEX_APPLICATION_TEMP_FILES. Hopefully it's what you're trying to achieve.
https://apex.oracle.com/pls/apex/f?p=34781
Username: demo
Password: demo
This uses the PDF.js project by Mozilla. Here's a quick recipe of what you may need.
Create a File Browse page item and set the Storage Type to Table APEX_APPLICATION_TEMP_FILES.
Create a page button to submit the page.
Create a Classic Report region and enter the following query:
select
id
, filename
from apex_application_temp_files
where application_id = :APP_ID
Add a virtual column and set the HTML Expression:
<button type="button" class="btn-preview-pdf" data-id="#ID#">Preview</button>
Create a region and enter the following in the Source:
<canvas id="preview-pane"></canvas>
Create a Click dynamic action.
a. Set the selection Type to jQuery Selector.
b. Enter the jQuery Selector .btn-preview-pdf.
Add a Execute JavaScript Code action with the following JS code (check out the examples from the PDF.js website for more details on what the code does):
var fileId = $(this.triggeringElement).data('id');
var docUrl = 'f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=DOWNLOADPDF:::FILE_ID:' + fileId;
var previewPane = this.affectedElements[0];
// from PDF.js examples
pdfjsLib.getDocument(docUrl).then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = previewPane;
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
})
}, function(reason) {
console.error(reason);
});
For the action, also set the Affected Elements:
a. Selection Type: jQuery Selector
b. jQuery Selector: #preview-pane
Follow Joel Kallman's post on creating a link to download a file. You will need an Application Process (DOWNLOADPDF) and an Application Item (FILE_ID) The modified code for the Application Process DOWNLOADPDF looks like this:
begin
for file in (select *
from apex_application_temp_files
where id = :FILE_ID) loop
--
sys.htp.init;
sys.owa_util.mime_header( file.mime_type, FALSE );
sys.htp.p('Content-length: ' || sys.dbms_lob.getlength( file.blob_content));
sys.htp.p('Content-Disposition: attachment; filename="' || file.filename || '"' );
sys.htp.p('Cache-Control: max-age=3600'); -- tell the browser to cache for one hour, adjust as necessary
sys.owa_util.http_header_close;
sys.wpg_docload.download_file( file.blob_content );
apex_application.stop_apex_engine;
end loop;
end;
Almost missed this out. On the Page Attributes, set the JavaScript File URLs to any of the CDNs listed. For example:
//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js
Note that this is a very basic prototype. The preview only allows you to view the first page. You will need to figure out the API and then do the necessary to allow multipage viewing. I'll leave you to figure that out.
That should be it. Let me know if it doesn't work for you.