Alfresco Share：如何在task-edit页面旁显示任务关联PDF文档预览？

数据老陈

2026-5-14

我来帮你搞定在Alfresco Share的task-edit页面旁边显示PDF预览的问题，结合你说的始终只附带1份PDF这个特定场景，给你两个可行的方案，一个是快速上手的极简定制，另一个是更规范的可复用组件开发方式：

方案一：快速极简定制（适合单PDF场景）

这个方案直接修改现有task-edit页面的模板，不用复杂的组件开发，完美匹配你的单一PDF需求：

定位task-edit页面模板文件
找到Alfresco Share的webapp目录，路径一般是：WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/workflow/task-edit.get.html.ftl

插入预览区域代码
打开模板后，找到表单容器（通常是<div class="form-container">），在它同级位置添加PDF预览的代码块。利用Freemarker语法直接从任务的bpm_package里筛选出PDF文档，再通过iframe加载预览：

<!-- 包裹原有表单和新预览区域的容器 -->
<div class="task-edit-container">
  <div class="form-container">
    <!-- 原有的表单代码保持不变 -->
    ...
  </div>

  <#-- PDF预览区域 -->
  <#assign packageItems = workflowUtils.getPackageItems(taskInstance)?filter(item -> 
      item.node.type.shortName == "cm:content" && item.node.content.mimeType == "application/pdf")>
  <#if packageItems?size > 0>
    <#assign pdfNode = packageItems[0].node>
    <div class="task-pdf-preview">
      <h3>PDF文档预览</h3>
      <iframe src="${url.context}/proxy/alfresco/api/node/${pdfNode.nodeRef.storeRef.protocol}/${pdfNode.nodeRef.storeRef.identifier}/${pdfNode.nodeRef.id}/content/thumbnails/pdf?c=force&ph=true" 
              width="100%" height="600px" frameborder="0"></iframe>
    </div>
  </#if>
</div>

添加并排布局样式
打开对应的CSS文件：WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/workflow/task-edit.get.css，添加样式让表单和预览栏横向排列：

.task-edit-container {
  display: flex;
  gap: 24px;
  padding: 16px;
}
.form-container {
  flex: 1;
}
.task-pdf-preview {
  width: 420px;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
}

重启Share测试效果
保存修改后重启Alfresco Share服务，打开task-edit页面就能看到侧边的PDF预览了。

方案二：规范的Surf组件开发（适合复用/扩展）

如果之后需要把这个预览功能用到其他页面，或者需要更灵活的逻辑，推荐开发一个自定义Surf组件：

创建自定义PDF预览组件

新建webscript描述文件pdf-preview.get.desc.xml，定义组件基础信息：

<webscript>
  <shortname>Task PDF Preview</shortname>
  <description>Displays PDF preview for workflow task attachments</description>
  <family>workflow</family>
  <url>/components/workflow/pdf-preview</url>
</webscript>

新建模板文件pdf-preview.get.html.ftl，写入预览逻辑（和方案一的预览代码类似即可）。

可选：新建JS控制器pdf-preview.get.js，在后端处理任务附件的筛选逻辑，让模板更简洁：

model.packageItems = workflowUtils.getPackageItems(taskInstance).filter(function(item) {
  return item.node.type.shortName === "cm:content" && item.node.content.mimeType === "application/pdf";
});

将组件嵌入task-edit页面
找到页面配置文件WEB-INF/classes/alfresco/site-data/pages/workflow-task-edit.xml，在页面的组件列表中添加自定义组件：

<component>
  <region-id>pdf-preview</region-id>
  <source-id>workflow-task-edit</source-id>
  <scope>page</scope>
  <sub-components>
    <sub-component id="default">
      <url>/components/workflow/pdf-preview</url>
    </sub-component>
  </sub-components>
</component>

部署并测试
将组件文件放到Share的对应目录，重启服务后即可生效。

注意事项

权限验证：确保当前登录用户拥有该PDF文档的查看权限，否则预览会加载失败。
性能优化：如果PDF文件较大，建议依赖Alfresco的缩略图缓存机制（代码中的c=force是强制生成，正式环境可以去掉）。
浏览器兼容性：现代主流浏览器（Chrome、Firefox、Edge）都支持直接在iframe中显示PDF，无需额外插件。

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