如何借助pptxGenjs与OutSystems在PowerPoint中渲染HTML字符串？

核心逻辑 #

pptxGenJS不支持直接渲染HTML，所以得先把转义的HTML字符串还原成标准格式，再把HTML元素（列表、加粗、斜体等）转换成pptxGenJS能识别的内容结构，最后生成PPT内容。

步骤1：解码转义的HTML字符串 #

你的HTML字符串是转义后的格式（比如<ul>），第一步要把它还原成正常HTML：

// 简单替换转义字符（适合基础场景）
const decodedHtml = htmlString.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// 复杂HTML推荐用DOMParser解析（更可靠）
const parser = new DOMParser();
const doc = parser.parseFromString(decodedHtml, 'text/html');

步骤2：把HTML元素转成pptxGenJS格式 #

针对你用到的列表、加粗、斜体，分别做处理：

处理无序列表（

/
• ）

解析

下的所有
• ，生成pptxGenJS支持的项目符号列表：

  const ulElement = doc.querySelector('ul');
  if (ulElement) {
    const pptxList = [];
    ulElement.querySelectorAll('li').forEach(li => {
      pptxList.push({ text: li.textContent, bullet: true });
    });
    // 给PPT添加列表幻灯片
    pptx.addSlide().addText(pptxList, { x: 1, y: 1, w: 8, h: 5 });
  }
  

  处理富文本（加粗/斜体）

  如果

• 里包含/或/，需要把文本拆成带样式的片段：

  // 递归解析富文本元素
  function parseRichText(element) {
    const textFragments = [];
    element.childNodes.forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        textFragments.push({ text: node.textContent.trim() });
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        const styles = {};
        if (['B', 'STRONG'].includes(node.tagName)) styles.bold = true;
        if (['I', 'EM'].includes(node.tagName)) styles.italic = true;
        // 处理子元素的样式继承
        parseRichText(node).forEach(frag => {
          textFragments.push({ ...frag, ...styles });
        });
      }
    });
    return textFragments;
  }
  
  // 用富文本解析处理列表项
  ulElement.querySelectorAll('li').forEach(li => {
    const richText = parseRichText(li);
    pptxList.push({ text: richText, bullet: true });
  });
  

  步骤3：在OutSystems中集成 #

  1. 在客户端模块里引入pptxGenJS：可以通过「JavaScript资源」添加本地脚本，或者在页面头部引入CDN脚本。
  2. 创建客户端动作：接收HTML字符串作为输入参数，把上面的JavaScript逻辑写进去，调用pptxGenJS生成并下载PPT。
  3. 从数据库取出存储的HTML字符串，传入这个客户端动作执行即可。

  完整示例代码（OutSystems客户端动作） #

  // 输入参数：HtmlString（类型：Text）
  const htmlString = $parameters.HtmlString;
  const pptx = new pptxGenJS();
  
  // 解码转义HTML
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString.replace(/&lt;/g, '<').replace(/&gt;/g, '>'), 'text/html');
  
  // 富文本解析函数
  const parseRichText = (element) => {
    const fragments = [];
    element.childNodes.forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        fragments.push({ text: node.textContent.trim() });
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        const styles = {};
        if (['B', 'STRONG'].includes(node.tagName)) styles.bold = true;
        if (['I', 'EM'].includes(node.tagName)) styles.italic = true;
        parseRichText(node).forEach(frag => fragments.push({ ...frag, ...styles }));
      }
    });
    return fragments;
  };
  
  // 解析并添加列表到PPT
  const ulElement = doc.querySelector('ul');
  if (ulElement) {
    const slide = pptx.addSlide();
    const listItems = [];
    ulElement.querySelectorAll('li').forEach(li => {
      listItems.push({ text: parseRichText(li), bullet: true });
    });
    slide.addText(listItems, { x: 1, y: 1, w: 8, h: 5, fontSize: 14 });
  }
  
  // 生成并下载PPT
  pptx.writeFile('HTML转换PPT.pptx');
  

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