基于SPFX列表数据生成模板化文件的技术实现问询

方案1：前端直接用Open XML SDK for JavaScript处理 #

利用Open XML格式的原生操作能力，直接在SPFX WebPart中读取docx模板、替换占位符后生成新文件。

步骤： #

1. 准备docx模板：在模板中插入对应字段的占位符，比如{CompanyName}、{ClientName}、{CurrentDate}等，与SPListItem字段一一对应。
2. 通过PnP JS从SharePoint库获取模板文件的ArrayBuffer：

import { sp } from "@pnp/sp/presets/all";

async function getTemplateBuffer(templateUrl: string): Promise<ArrayBuffer> {
  const file = await sp.web.getFileByServerRelativeUrl(templateUrl).getBuffer();
  return file;
}

3. 使用openxml-js库处理模板，遍历文本节点替换占位符：

import { Document, Packer } from "openxml-js";

async function generateDocxFromTemplate(templateBuffer: ArrayBuffer, data: SPListItem): Promise<ArrayBuffer> {
  const doc = new Document(templateBuffer);
  
  // 遍历文档所有文本节点，替换占位符
  const textNodes = doc.getElementsByTagName("w:t");
  for (let i = 0; i < textNodes.length; i++) {
    const node = textNodes[i];
    let text = node.textContent || "";
    
    text = text.replace("{CompanyName}", data.CompanyName);
    text = text.replace("{ClientName}", data.ClientName);
    text = text.replace("{CurrentDate}", data.CurrentDate);
    text = text.replace("{PreferredDate}", data.PreferredDate);
    text = text.replace("{RequestedBy}", data.RequestedBy);
    text = text.replace("{TypeOf}", data.TypeOf);
    text = text.replace("{Reason}", data.Reason);
    text = text.replace("{Urgent}", data.Urgent);
    text = text.replace("{Department}", data.Department);
    text = text.replace("{Chargeable}", data.Chargeable);
    text = text.replace("{EstimatedTime}", data.EstimatedTime);
    
    node.textContent = text;
  }
  
  // 生成新的文件Buffer
  const newBuffer = await Packer.toBuffer(doc);
  return newBuffer;
}

4. 将生成的文件上传到指定SharePoint库：

async function uploadGeneratedFile(buffer: ArrayBuffer, fileName: string, folderUrl: string) {
  await sp.web.getFolderByServerRelativeUrl(folderUrl).files.add(fileName, buffer, true);
}

5. 在getListItemData方法中整合调用：

private async getListItemData(): Promise<void> {
  try {
    const response = await this._getListData();
    this.listItems = response.value.map((item: SPListItem, index: number) => ({
      localIndex: index,
      Title: `${item.CompanyName}-${item.RequestedBy}`,
      ...item
    }));
    
    // 以第一个列表项为例生成文件
    const targetItem = this.listItems[0];
    const templateBuffer = await getTemplateBuffer("/sites/your-site/Shared Documents/Template.docx");
    const docBuffer = await generateDocxFromTemplate(templateBuffer, targetItem);
    await uploadGeneratedFile(docBuffer, `${targetItem.Title}.docx`, "/sites/your-site/Shared Documents/Generated");
    
    this.printListItemInfo();
  } catch (err) {
    console.error(err);
  }
}

方案2：SPFX + Azure Functions后端处理 #

若前端处理复杂模板（如表格、样式）受限，可将数据传到Azure函数，后端用更成熟的Open XML工具生成文件，再返回给前端或直接上传到SPO。

步骤： #

1. 创建HTTP触发的Azure函数，接收SPListItem的JSON数据：

// C# Azure函数示例
using Xceed.Document.NET;
using Xceed.Words.NET;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Newtonsoft.Json;

public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "post", Route = null)] HttpRequest req,
    ILogger log)
{
    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    var item = JsonConvert.DeserializeObject<SPListItem>(requestBody);
    
    // 从SPO读取模板（可通过PnP Core SDK实现）
    using (var doc = DocX.Load("Template.docx"))
    {
        doc.ReplaceText("{CompanyName}", item.CompanyName);
        doc.ReplaceText("{ClientName}", item.ClientName);
        // 替换剩余字段...
        
        using (var ms = new MemoryStream())
        {
            doc.SaveAs(ms);
            ms.Position = 0;
            return new FileStreamResult(ms, "application/vnd.openxmlformats-officedocument.wordprocessingml.document")
            {
                FileDownloadName = $"{item.CompanyName}-{item.RequestedBy}.docx"
            };
        }
    }
}

2. SPFX中调用Azure函数，接收生成的文件Buffer并上传：

async function callAzureFunction(item: SPListItem): Promise<ArrayBuffer> {
  const response = await fetch("https://your-azure-function-url/api/GenerateDocx", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-functions-key": "your-function-access-key"
    },
    body: JSON.stringify(item)
  });
  return await response.arrayBuffer();
}

方案3：Power Automate联动（低代码方案） #

无需编写大量代码，通过Power Automate流实现自动化生成：

1. 在Power Automate中创建手动触发流，添加「获取列表项」动作，接收SPFX传递的列表项ID。
2. 添加「填充Microsoft Word模板」动作，选择存储在SPO库中的模板，将列表字段映射到模板占位符。
3. 添加「创建文件」动作，将生成的Word文件保存到指定SPO库。
4. SPFX中调用Power Automate流：

import { sp } from "@pnp/sp/presets/all";

async function triggerFlow(itemId: number) {
  const flowUrl = "https://prod-xx.westus.logic.azure.com:443/workflows/your-flow-id/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=your-flow-signature";
  
  await fetch(flowUrl, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ itemId: itemId })
  });
}

补充：修正docxtemplater方案（若之前使用有误） #

如果之前docxtemplater方案失败，大概率是模板获取或输出处理问题，正确流程如下：

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";

async function generateWithDocxtemplater(templateBuffer: ArrayBuffer, data: any) {
  const zip = new PizZip(templateBuffer);
  const doc = new Docxtemplater(zip, {
    paragraphLoop: true,
    linebreaks: true
  });
  
  // 传入匹配模板占位符的数据结构
  const templateData = {
    "Company Name": data.CompanyName,
    "Client Name": data.ClientName,
    "Current Date": data.CurrentDate,
    // 其他字段对应你的JSON结构...
  };
  
  doc.setData(templateData);
  doc.render();
  
  const outBuffer = doc.getZip().generate({ type: "arraybuffer" });
  return outBuffer;
}

生成的Buffer可直接用方案1的上传方法存入SPO。

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