Oracle Apex PDF 查看器

Question

我是 Oracle-Apex 的新手。我需要帮助才能在 Oracle APEX 中显示 PDF。我有一个问题：我已将 PDF 上传到数据库。我将 PDF 保存为数据库中的 blob。之后，我在经典报告中显示了 PDF 的名称。当我单击名称时，我想查看我上传的 PDF 的预览。现在我正在寻找一种用代码显示 PDF 的方法。有人可以帮忙吗？

我需要上一个和下一个按钮。

我如何在该地区显示此 PDF？这是我的页面

Answer 1

这是我快速使用的一个例子APEX_APPLICATION_TEMP_FILES。希望这就是您想要实现的目标。 https://apex.oracle.com/pls/apex/f?p=34781

用户名：demo
密码：demo

这使用Mozilla 的PDF.js项目。这是您可能需要的快速食谱。

1. 创建一个File Browse页面项并将存储类型设置为Table APEX_APPLICATION_TEMP_FILES。
2. 创建一个页面按钮来提交页面。

3. 创建经典报表区域并输入以下查询：

   select
       id
       , filename
   from apex_application_temp_files
   where application_id = :APP_ID
   

4. 添加虚拟列并设置 HTML 表达式：

   <button type="button" class="btn-preview-pdf" data-id="#ID#">Preview</button>
   

5. 创建一个区域并在源中输入以下内容：

   <canvas id="preview-pane"></canvas> 
   

6. 创建单击动态操作。

   A。将选择类型设置为jQuery Selector。

   b. 输入 jQuery 选择器.btn-preview-pdf。

7. Execute JavaScript Code使用以下 JS 代码添加操作（查看 PDF.js 网站上的示例，了解有关代码功能的更多详细信息）：

   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);
   });
   

8. 对于操作，还设置受影响的元素：

   A。选择类型：jQuery Selector

   b. jQuery 选择器：#preview-pane

9. 请关注 Joel Kallman关于创建文件下载链接的帖子。您将需要一个应用程序流程 ( DOWNLOADPDF) 和一个应用程序项目 ( FILE_ID) 修改后的应用程序流程代码DOWNLOADPDF如下所示：

   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;
   

10. 差点就错过了这个。在页面属性上，将 JavaScript 文件 URL 设置为列出的任何 CDN 。例如：

    //cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js

请注意，这是一个非常基本的原型。预览仅允许您查看第一页。您需要弄清楚API，然后执行必要的操作以允许多页查看。我会让你自己解决这个问题。

应该是这样。如果它不适合您，请告诉我。