You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

OneDrive FilePicker JavaScript文件下载功能实现求助

OneDrive FilePicker 文件下载功能实现问题

我克隆了MS OneDrive FilePicker仓库的「javascript-basic-consumer」示例,已按官方文档完成Azure配置,上传功能可正常运行,但文件下载功能始终无法实现。我尝试过查阅官方文档、参考其他示例及修改代码,甚至尝试在params中添加如下commands配置:

commands?: {
    /**
     * Specifies the behavior for file-picking.
     */
    pick?: {
      /**
       * A special action to perform when picking the file, before handing the result
       * back to the host app.
       */
      action?: "select" | "share" | "download" | "move";
      /**
       * A custom label to apply to the button which picks files.
       * This must be localized by the host app if supplied.
       */
}
}

但修改后要么出现空白页面,要么选择文件点击select按钮后无响应。另外我了解到可能需要引入Graph API,但未成功实现。希望有人能帮助我实现选择文件并点击select按钮后触发下载的功能,以下是当前完整代码:

<html>

<head>
    <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.19.0/js/msal-browser.min.js"></script>
    <script type="text/javascript" src="scripts/auth.js"></script>
    <script>
        const baseUrl = "https://onedrive.live.com/picker";
        const params = {
            sdk: "8.0",
            entry: {
                oneDrive: {
                    files: {},   
                }
            },
            authentication: {},
            messaging: {
                origin: "http://localhost:3000",
                channelId: "27"
            },
            typesAndSources: {
                mode: "files",
                pivots: {
                    oneDrive: true,
                    recent: true,
                },
            },
            selection:{
                mode: "multiple",
            },
        };

        
        let port = null;

        async function launchPicker() {
            const frame = document.getElementById("iframe-id");
            const doc = frame.contentDocument || frame.contentWindow.document;

            const authToken = await getToken();

            const queryString = new URLSearchParams({
                filePicker: JSON.stringify(params),
            });

            const url = `${baseUrl}?${queryString}`;

            const form = doc.createElement("form");
            form.setAttribute("action", url);
            form.setAttribute("method", "POST");
            doc.body.append(form);

            const input = doc.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", "access_token");
            input.setAttribute("value", authToken);
            form.appendChild(input);

            form.submit();

            window.addEventListener("message", (event) => {
                if (event.origin !== "https://onedrive.live.com") {
                    return;
                }

                const message = event.data;

                if (message.type === "initialize" && message.channelId === params.messaging.channelId) {
                    port = event.ports[0];
                    port.addEventListener("message", messageListener);
                    port.start();
                    port.postMessage({ type: "activate", });
                }
            });
        }

        async function messageListener(message) {
            
            switch (message.data.type) {
                case "notification":
                    console.log(`notification: ${message.data}`);
                    break;
                case "command":
                    port.postMessage({
                        type: "acknowledge",
                        id: message.data.id,
                    });

                    const command = message.data.data;

                    switch (command.command) {
                        case "authenticate":
                            const token = await getToken();
                            if (typeof token !== "undefined" && token !== null) {
                                port.postMessage({
                                    type: "result",
                                    id: message.data.id,
                                    data: {
                                        result: "token",
                                        token,
                                    }
                                });
                            } else {
                                console.error(`Could not get auth token for command: ${JSON.stringify(command)}`);
                            }
                            break;
                        case "close":
                            win.close();
                            break;
                        case "pick":
                            console.log(`Picked: ${JSON.stringify(command)}`);
                            document.getElementById("pickedFiles").innerHTML = `<pre>${JSON.stringify(command, null, 2)}</pre>`;
                            port.postMessage({
                                type: "result",
                                id: message.data.id,
                                data: {
                                    result: "success",
                                },
                            });
                            win.close();
                            break;
                        default:
                            console.warn(`Unsupported command: ${JSON.stringify(command)}`, 2);
                            port.postMessage({
                                result: "error",
                                error: {
                                    code: "unsupportedCommand",
                                    message: command.command
                                },
                                isExpected: true,
                            });
                            break;
                    }
                    break;
            }
        }
    </script>
</head>

<body style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column;">
    <iframe id="iframe-id" width="1080" height="680" style="border: none;"></iframe>
    <br />
    <div id="pickedFiles"></div>
</body>

<script type="text/javascript">
    window.onload = function() {
        launchPicker(); // This will automatically launch the picker when the page is fully loaded
    };
</script>

</html>

内容的提问来源于stack exchange,提问作者user24366993

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 14:47:12