PptxGenJS 添加超链接的方法，以及超链接 hyperlink 在 WPS 中点击没反应的问题PptxGenJS

一、问题的背景

近期工作中有在系统中直接导出 ppt 文件的业务功能，技术上采用 PptxGenJS 做实现。整体功能按照需求没什么问题，但用户需求中有需要在 ppt 中展示超链接的需求，所以引发出来本文的两个点，添加超链接，以及添加之后发现在 WPS 中点击没反应（在 office 中是可以的哦）。

PptxGenJS 官方地址：github.com/gitbrent/Pp…

本文的样例代码在 PptxGenJS demo 中都有, 可以直接拉代码本地运行看

PptxGenJS 在线 Demo：gitbrent.github.io/PptxGenJS/d…

PptxGenJS 官方手册：gitbrent.github.io/PptxGenJS/d…

Demo 源码：github.com/gitbrent/Pp…

二、PptxGenJS 添加超链接的方法

从 Demo 及手册中看到 hyperlink 参数可以实现添加超链接的需求

样例代码：

import pptxgen from "pptxgenjs";

// 1. Create a new Presentation
let pres = new pptxgen();

// 2. Add a Slide
let slide = pres.addSlide();

// 3. Add one or more objects (Tables, Shapes, Images, Text and Media) to the Slide
let textboxText = "Hello World from PptxGenJS!";
let textboxOpts = { 
    x: 1, 
    y: 1, 
    color: "363636",
    hyperlink: {
        url: "https://gitbrent.github.io/PptxGenJS/docs/api-text/"
    }
};
slide.addText(textboxText, textboxOpts);

// demo 中还有其他写法，如：
slide.addText(
    [{ text: "Link with Tooltip", options: { hyperlink: { url: "https://github.com/gitbrent/pptxgenjs", tooltip: "Visit Homepage"， color: "3297fc" } }}],
    { x: 0.5, y: 1.0, w: 2.5, h: 0.6, margin: 10, fill: { color: "F1F1F1" }, fontSize: 14, align: "center" }
);


// 4. Save the Presentation
pres.writeFile();

三、hyperlink 在 WPS 中点击没反应

那么，问题来了。生成的 ppt 在 WPS 中只展示了超链接样式，但是单击、右击、Command+点击、Ctrl+点击都没反应（office 中是可以打开的），自己手动在 WPS 中添加的超链接鼠标划上就会有提示，Command+点击就直接打开了，是什么原因呢？

经过排查最终发现是 PptxGenJS 中的一个 bug，附两个相关的 issue 地址和截图：
1、【Issue】【1262】# [BUG] Prop [hyperlink] doesn't work when open with WPS #1262

2、【Issue】【1014】# hyperlink not work when opened at wps #1014

四、怎么解决？

问题原因已经知道了，在【Issue】【1262】# [BUG] Prop [hyperlink] doesn't work when open with WPS #1262 和 1014 Issue 中都有提到，“<a:hlinkClick> tag should have an action attribute and its value should be ppaction://hlinkfile”, PptxGenJS 设置超链接 hyperlink 缺少 action ppaction://hlinkfile 属性，添加之后解决。

作者已在 4.1.0 中做了修复，但目前还未发布，发布后可以引用 4.1.0 的版本就可以解决掉这个问题。 github.com/gitbrent/Pp…

但没有发布前，如果需要解决，那么可以按照修改源码的方式临时解决。涉及到的文件可以都做修改，如下：

另外几个文件是压缩的，可以参考上面截图的搜索关键字和定位点进行修改。

解决之后的效果：

修复后效果.jpg

五、扩展

PPTX 格式中的 ppaction 类型详解在 PPTX 文件格式（基于 OOXML 标准）中，ppaction 是用于定义幻灯片中各种交互行为的特殊 URI 协议。这些动作类型通过 a:hlinkClick 或 a:hlinkMouseOver 元素中的 action 属性指定。

常见的 ppaction 类型包括：
ppaction://hlinkshow         - 跳转到另一个幻灯片
ppaction://hlinkpres        - 开始幻灯片放映
ppaction://hlinklastslide   - 跳转到最后一张幻灯片
ppaction://hlinkfirstslide  - 跳转到第一张幻灯片
ppaction://hlinklastviewed  - 跳转到上次查看的幻灯片
ppaction://hlinkendshow     - 结束幻灯片放映
ppaction://hlinkfile        - 打开外部文件
ppaction://hlinkweb         - 打开网页URL
ppaction://hlinkoaction     - 执行OLE对象动作
ppaction://hlinkslide       - 跳转到指定幻灯片（需配合slideIndex）
ppaction://hlinktiming      - 触发时间线动画
ppaction://media            - 播放媒体文件
ppaction://customshow       - 启动自定义幻灯片放映

还可以考虑 patch-package 打补丁的修复方式：juejin.cn/post/696255…

六、问题检索路径

github 官方地址 Issues 中检索 hyperlink 或者 WPS （有遇到的其他的问题也可以按这种方法）：