Oracle Apex PDF 查看器

Question

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

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

如何在该地区显示此 PDF？here is my Page

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. 创建一个区域并在Source中输入以下内容：

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

6. 创建 Click 动态操作。

   一个。将选择类型设置为jQuery Selector。

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

7. 使用以下 JS 代码添加 Execute JavaScript Code 操作（查看 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. 对于动作，还要设置受影响的元素：

   一个。选择类型：jQuery Selector

   b. jQuery 选择器：#preview-pane

9. 关注 Joel Kallman 的 post 创建链接以下载文件。您将需要一个应用程序进程 (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 listed。例如：

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

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

应该是这样的。让我知道它是否不适合你。