如何将 MDM Clipboard API 与 http 请求 JS 结合使用

Question

这里是初学者:)

我收到以下错误：无法发出请求：无法读取未定义的属性（读取“writeText”）

我在嵌入式 js 文件中创建了一个按钮，它将在 GET 请求中将全局变量（由 js 生成的 html 表）复制到剪贴板。

它在本地不起作用，即使这是我在安全网站（https）上测试的问题，它也不起作用。

我能找到的所有东西都是为 DOM 设计的，据我所知，我不能在带有 Express js 文件的 JS 中使用它。

app.get("/copyToClipboard", async (req, res) => {
    try {
        console.log("inside copy to clip");
        await navigator.clipboard.writeText(tableFull);
        res.render("index.ejs");
      } catch (error) {
        console.error("Failed to make request:", error.message);
        res.render("index.ejs", {
          error: error.message,
        });
      }

    // res.sendFile(__dirname + "/index.html");
});

我尝试使用剪贴板工具： 剪贴板js.com

它也使用 DOM，所以不起作用。无奈之下，我尝试用 POST 请求发送它，这对我来说没有意义，但我还是尝试了。

我试图找到剪贴板 API 的 npm 安装代码，但除了上面显示的包之外，我找不到任何其他包。看起来好像可以找到 navigator.clipboard，但问题出在 writeText

Answer 1

错误

Cannot read properties of undefined (reading 'writeText')

基本上意味着

Can't get the method writeText from the object it's called from, because the object is undefined

。所以剪贴板对象是

undefined

，在这种情况下，也是导航器对象。

为了更好地理解根本问题，此时应该检查导航器对象的文档。在我们看到的文档中，

可以使用只读 window.navigator 属性来检索 Navigator 对象。

所以我们继续检查窗口对象的文档，它告诉我们

Window接口代表一个包含DOM文档的窗口； document 属性指向该窗口中加载的 DOM 文档。

这基本上意味着，

window

对象（因此也是

navigator

对象）仅在使用DOM时才可用，因此仅在

.ejs

或

.html

文件中可用。它不存在于nodejs服务器的上下文中。

因此，为了解决您的问题，任何想要利用窗口对象的代码都必须位于模板内。在您的情况下，这意味着

await navigator.clipboard.writeText(tableFull);

需要移动到

index.ejs

中的脚本标记内。

另外，我不建议只为小程序实现一条路径，例如将某些内容复制到剪贴板，而是尝试在客户端实现它们或使用事件发射器之类的东西。如果您确实在路线上有程序，请不要将用户重定向到该页面，而是使用 fetchAPI （只是作为一般提示，也许您已经这样做了）

希望这有帮助，请随时寻求进一步的帮助或澄清:)