基于TypeScript的Excel插件本地文件保存可行性及解决方案问询

问题描述 #

我用Yeoman Generator创建了TypeScript版本的Excel插件，已经实现点击按钮高亮Excel区域、调用外部API处理单元格等基础功能，但尝试用fs或file-saver库创建并下载新文件时，既无报错信息也没有文件下载。

相关代码示例 #

import { saveAs } from "file-saver";
import { Document, Packer, Paragraph, TextRun } from "docx";

export const docGenerator = async () => {
  const doc = new Document({
    sections: [
      {
        properties: {},
        children: [
          new Paragraph({
            children: [
              new TextRun("Hello World"),
              new TextRun({
                text: "Foo Bar",
                bold: true,
              }),
              new TextRun({
                text: "\tGithub is the best",
                bold: true,
              }),
            ],
          }),
        ],
      },
    ],
  });

  try {
    const blob = await Packer.toBlob(doc);
    console.log(blob);
    saveAs(blob, "example.docx");
    console.log("Document created successfully");
  } catch (error) {
    console.error(error);
  }
};

核心问题解答 #

1. Office插件中能否直接创建并保存本地文件？ #

不能直接通过fs或file-saver这类常规前端/Node.js库实现本地文件保存。

2. 原因是什么？ #

Office插件运行在Office应用内嵌的沙箱浏览器环境中，这个环境有严格的安全限制：

• fs是Node.js专属的文件系统模块，Office插件的前端运行环境不支持Node.js API；
• file-saver依赖浏览器的自动下载触发机制，但Office内嵌浏览器会拦截这类无用户主动交互触发的下载请求，且不会抛出报错信息，这就是你看不到文件下载也无报错提示的原因。

3. 替代方案 #

方案一：使用Office JavaScript API的原生文件保存能力

利用Office提供的FileDialog API让用户主动选择保存位置，再将文件内容写入选中的文件：

import { Document, Packer, Paragraph, TextRun } from "docx";

export const docGenerator = async () => {
  const doc = new Document({
    sections: [
      {
        children: [
          new Paragraph({
            children: [
              new TextRun("Hello World"),
              new TextRun({ text: "Foo Bar", bold: true }),
            ],
          }),
        ],
      },
    ],
  });

  try {
    const blob = await Packer.toBlob(doc);
    const arrayBuffer = await blob.arrayBuffer();
    
    // 调用Office文件选择对话框，让用户指定保存路径
    Office.context.document.getFileDialogAsync(
      Office.FileDialogType.save,
      {
        title: "保存Word文档",
        fileTypes: [{ displayName: "Word文档", extension: ".docx" }],
        defaultFileName: "example.docx"
      },
      async (result) => {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
          const targetFilePath = result.value;
          // 将文件内容写入选中的路径
          await Office.context.document.saveAsync(targetFilePath, {
            data: arrayBuffer
          });
        }
      }
    );
  } catch (error) {
    console.error(error);
  }
};

方案二：通过后端服务转发文件下载

如果插件有配套后端服务，可以将生成的文件Blob发送到后端，由后端返回文件流，再通过前端创建a标签触发下载（需确保Office内嵌浏览器允许该操作）：

import { Document, Packer } from "docx";

export const docGenerator = async () => {
  const doc = new Document({
    sections: [
      {
        children: [new Paragraph({ children: [new TextRun("Hello World")] })],
      },
    ],
  });

  try {
    const blob = await Packer.toBlob(doc);
    const formData = new FormData();
    formData.append("file", blob, "example.docx");
    
    // 发送文件内容到后端接口
    const response = await fetch("/api/forward-download", {
      method: "POST",
      body: formData
    });
    
    const downloadBlob = await response.blob();
    // 创建a标签触发用户下载
    const url = window.URL.createObjectURL(downloadBlob);
    const downloadLink = document.createElement("a");
    downloadLink.href = url;
    downloadLink.download = "example.docx";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(downloadLink);
  } catch (error) {
    console.error(error);
  }
};

方案三：引导用户手动复制内容保存

如果文件内容是纯文本或简单格式，可以生成文本字符串，引导用户复制后手动保存为本地文件：

export const saveTextContent = () => {
  const content = "Hello World\nFoo Bar\nGithub is the best";
  const blob = new Blob([content], { type: "text/plain" });
  const url = window.URL.createObjectURL(blob);
  const downloadLink = document.createElement("a");
  downloadLink.href = url;
  downloadLink.download = "example.txt";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(downloadLink);
};

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