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
相关产品推荐
相关产品推荐

