为何PowerPoint Add-In无法与Flask后端协作？Script Lab中JS运行正常

算力阿峰

2026-6-24

PowerPoint任务窗格Add-in加载异常求助

我正在开发一个简单的PowerPoint任务窗格Add-in，功能是在选中的文本框中写入"Hello world"。使用Python Flask作为后端，taskpane.html和manifest-localhost.xml取自官方示例，仅修改了端口（从3000改为5000）并替换了生成的GUID。

问题现象

Manifest可正常加载，能看到名为"Hello World"的任务窗格，但窗格内无内容
初始报错：Add-in Error Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.
重试后报错：Add-in Error This add-in may not load properly, but you can still try to start it.
点击启动后无任何反应，任务窗格仍为空

已确认的正常情况

taskpane.html中的JavaScript代码在Script Lab插件中可正常运行
Flask应用运行正常，所有端点均返回200状态码
使用mkcert生成localhost证书，已在Brave浏览器中授权，访问https://127.0.0.1:5000显示安全，通过curl -v https://localhost:5000 --cacert ./certs/localhost+2.pem验证正常

项目结构

.
├── app.py
├── assets
│   ├── favicon.ico
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-64.png
│   └── icon-80.png
├── certs
│   ├── localhost+2-key.pem
│   └── localhost+2.pem
├── manifest-localhost.xml
├── README.md
└── templates
    └── taskpane.html

代码片段

app.py

from flask import Flask, render_template
from flask.helpers import send_file
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def home():
    return "Hello World!"

@app.route("/assets/icon-16.png")
def icon16():
    return send_file("./assets/icon-16.png")

@app.route("/assets/icon-32.png")
def icon32():
    return send_file("./assets/icon-32.png")

@app.route("/assets/icon-64.png")
def icon64():
    return send_file("./assets/icon-64.png")

@app.route("/assets/icon-80.png")
def icon80():
    return send_file("./assets/icon-80.png")

@app.route("/assets/icon-128.png")
def icon128():
    return send_file("./assets/icon-128.png")

@app.route('/favicon.ico')
def favicon():
    return send_file('./assets/favicon.ico')

@app.route("/taskpane.html")
def taskpane():
    return render_template("taskpane.html")


if __name__ == "__main__":
    ssl_context = ("./certs/localhost+2.pem", "./certs/localhost+2-key.pem")
    app.run(debug=True, ssl_context=ssl_context)

taskpane.html

<!DOCTYPE html>
<html>

<head>
    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>

<body>
    <p>This add-in will insert 'Hello world!' in the current selection of the slide.</p>
    <button onclick="sayHello()">Say hello</button>

</body>

<script>
    Office.onReady((info) => {
        document.getElementById("helloButton").onclick = sayHello;
    });

    async function sayHello() {

        // Set coercion type to text since 
        const options = { coercionType: Office.CoercionType.Text };

        // clear current selection
        await Office.context.document.setSelectedDataAsync(" ", options);

        // Set text in selection to 'Hello world!'
        await Office.context.document.setSelectedDataAsync("Hello world!", options);
    }

</script>

</html>

若需要manifest文件可提供，感谢帮助！

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

为何PowerPoint Add-In无法与Flask后端协作？Script Lab中JS运行正常

问题现象 #

已确认的正常情况 #

项目结构 #

代码片段 #

app.py #