APEX 19.2中如何将IG的ID传递至JS实现PDFViewer？

问题根源 #

你遇到的404错误是因为IG列中的#ID#未被正确替换为实际行ID，或者动态动作中没有正确接收到传递的ID值，导致请求URL末尾缺失ID参数。

解决方案 #

方案1：修正自定义事件的参数传递与接收 #

1. 确保IG列的链接正确渲染ID

   • 进入IG列的属性设置，确认「链接」->「目标」选择「JavaScript」，并在「JavaScript代码」中填写：

     apex.event.trigger(document, 'PDFViewer', [{id:'#ID#'}]); void(0);
     

     注意：#ID#必须是你IG数据源中ID列的正确别名（比如数据源列名为DOC_ID，则写#DOC_ID#）。
   • 页面运行时，右键点击链接查看源码，确认生成的代码中id:'xxx'的xxx是实际的ID值（而非保留#ID#）。

2. 修正动态动作的参数接收逻辑
   动态动作的JavaScript代码中，需要从事件的detail属性获取传递的参数，而非this.data.id，修改后的代码：

   // 从自定义事件的detail中取出ID
   const id = event.detail[0].id;
   
   async function getData(){
       // 验证ID是否存在，避免空值请求
       if (!id) {
           console.error('未获取到有效的文档ID');
           return;
       }
       const response = await fetch(`https://------/ords/ap/doc/docs/${id}`);
       // 检查请求是否成功
       if (!response.ok) {
           throw new Error(`请求失败：${response.status} ${response.statusText}`);
       }
       const blob = await response.blob();
       const blobUrl = URL.createObjectURL(blob);
       const pdfContainer = document.getElementById('pdfViewer');
       const iframe = pdfContainer.getElementsByTagName('iframe')[0];
       iframe.src = blobUrl;
       // 释放Blob URL，避免内存泄漏
       iframe.onload = () => {
           URL.revokeObjectURL(blobUrl);
       };
   }
   
   getData().catch(err => console.error('PDF加载失败:', err));
   

方案2：直接在IG列中调用加载函数（更简洁） #

跳过自定义事件，直接在IG列的链接中调用全局函数，减少中间环节：

1. 在页面的「函数和全局变量声明」中添加加载函数

   async function loadPDF(id) {
       if (!id) {
           console.error('未获取到有效的文档ID');
           return;
       }
       const response = await fetch(`https://------/ords/ap/doc/docs/${id}`);
       if (!response.ok) {
           throw new Error(`请求失败：${response.status} ${response.statusText}`);
       }
       const blob = await response.blob();
       const blobUrl = URL.createObjectURL(blob);
       const pdfContainer = document.getElementById('pdfViewer');
       const iframe = pdfContainer.getElementsByTagName('iframe')[0];
       iframe.src = blobUrl;
       iframe.onload = () => URL.revokeObjectURL(blobUrl);
   }
   

2. 修改IG列的JavaScript链接代码
   在IG列的「JavaScript代码」中填写：

   javascript:loadPDF('#ID#'); void(0);
   

   同样确保#ID#是正确的列别名，且页面渲染后能替换为实际ID值。

验证步骤 #

1. 页面运行后，点击IG中的file_name链接，查看浏览器控制台的请求URL，确认末尾带有正确的ID参数。
2. 检查PDF容器中的iframe是否成功加载PDF内容。

内容的提问来源于stack exchange，提问作者pit3k