SharePoint Online列表列格式化：悬停显示PDF附件预览求助

问题原因 #

你之前的代码使用<img>标签直接加载PDF文件URL，浏览器无法将PDF解析为图片格式，因此显示损坏图标。要实现PDF悬停预览，需改用iframe加载PDF的在线预览内容，或调用SharePoint的预览接口。

方案1：单PDF附件悬停预览（带PDF图标） #

以下代码将列表项的附件列替换为PDF图标，鼠标悬停时弹出卡片加载完整PDF预览：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin": "5px",
    "display": "flex",
    "justify-content": "center",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "font-size": "24px",
        "cursor": "pointer"
      },
      "attributes": {
        "iconName": "PDF",
        "title": "悬停查看PDF预览"
      },
      "customCardProps": {
        "directionalHint": "rightCenter",
        "openOnEvent": "hover",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "style": {
            "width": "800px",
            "height": "600px",
            "padding": "10px"
          },
          "children": [
            {
              "elmType": "iframe",
              "style": {
                "width": "100%",
                "height": "100%",
                "border": "none"
              },
              "attributes": {
                "src": "[$Attachments/0/serverRelativeUrl]?web=1",
                "title": "PDF预览"
              }
            }
          ]
        }
      }
    }
  ]
}

代码说明 #

• 用SharePoint内置的PDF图标替换原图片标签，直观标识附件类型
• 自定义卡片中通过<iframe>加载PDF，?web=1参数触发SharePoint在线预览模式，确保PDF正确渲染
• 调整卡片宽高为800x600，适配PDF阅读需求

方案2：显示PDF缩略图+悬停预览 #

如果需要在列表中显示PDF的缩略图，可改用SharePoint的缩略图生成接口，代码如下：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin": "5px",
    "display": "flex",
    "justify-content": "center",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "50px",
        "height": "50px",
        "cursor": "pointer"
      },
      "attributes": {
        "src": "/_layouts/15/getpreview.ashx?path=[$Attachments/0/serverRelativeUrl]&resolution=low",
        "alt": "PDF缩略图",
        "title": "悬停查看完整PDF"
      },
      "customCardProps": {
        "directionalHint": "rightCenter",
        "openOnEvent": "hover",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "style": {
            "width": "800px",
            "height": "600px",
            "padding": "10px"
          },
          "children": [
            {
              "elmType": "iframe",
              "style": {
                "width": "100%",
                "height": "100%",
                "border": "none"
              },
              "attributes": {
                "src": "[$Attachments/0/serverRelativeUrl]?web=1",
                "title": "PDF预览"
              }
            }
          ]
        }
      }
    }
  ]
}

代码说明 #

• 使用/_layouts/15/getpreview.ashx接口生成PDF的低分辨率缩略图，显示在列表中
• 悬停时仍通过iframe加载完整PDF预览

方案3：多PDF附件批量预览 #

如果列表项存在多个PDF附件，可通过循环遍历所有附件，每个附件对应一个预览入口：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "gap": "8px",
    "flex-wrap": "wrap",
    "padding": "4px"
  },
  "children": [
    {
      "forEach": "attachment in [$Attachments]",
      "elmType": "span",
      "style": {
        "font-size": "24px",
        "cursor": "pointer"
      },
      "attributes": {
        "iconName": "PDF",
        "title": "悬停查看：[!attachment.fileName]"
      },
      "customCardProps": {
        "directionalHint": "rightCenter",
        "openOnEvent": "hover",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "style": {
            "width": "800px",
            "height": "600px",
            "padding": "10px"
          },
          "children": [
            {
              "elmType": "iframe",
              "style": {
                "width": "100%",
                "height": "100%",
                "border": "none"
              },
              "attributes": {
                "src": "[$attachment.serverRelativeUrl]?web=1",
                "title": "预览：[!attachment.fileName]"
              }
            }
          ]
        }
      }
    }
  ]
}

代码说明 #

• 通过forEach循环遍历所有附件，为每个PDF生成独立的图标和预览卡片
• 鼠标悬停时显示对应附件的文件名和预览内容

注意事项 #

• 确保列表项的附件为PDF格式，若存在非PDF附件，需添加判断逻辑过滤
• 确认操作用户拥有该PDF文件的查看权限，否则预览会加载失败
• 代码中[$Attachments/0]指向第一个附件，若需默认预览其他附件，可修改索引值

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