如何使用客户端javascript访问节点服务器发送的数据答案

【问题标题】：How to access data sent by node sever using client side javascript如何使用客户端javascript访问节点服务器发送的数据
【发布时间】：2019-12-29 22:19:58
【问题描述】：

我正在使用节点服务器将表从 sqlite db 发送到浏览器。此表包含我想在浏览器上呈现的 pdf 文件的文件名和路径。到目前为止，我一直在为 pdf 文件和渲染使用硬编码路径。但是现在我已经在节点中设置了一个获取路由和一个控制器，这样每当在浏览器中点击“/内容”时，服务器就会查询数据库并将数据发送到客户端。发送我正在使用的数据

res.render('content/index',{data:queryData});

现在，如何使用客户端 javascript 访问这些数据，以便将 pdf 文件的路径传递给呈现 pdf 的函数？我已经进行了研究，我得到的最接近的答案是使用 XMLHttpRequest。这个方法我试过了

var xhr = new XMLHttpRequest();
const path = "http://localhost:3000/content";
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200)
{
   var myResponseText = xhr.responseText;
   console.log(myResponseText);
}
};
xhr.open('get', path, true);
xhr.send();

当我这样做时，我会得到视图的整个 html 代码。不是我预期的数据。我该如何解决这个问题。我在写这篇文章时做了更多的阅读，我想。我在某处设置了标题？但是文档说

app.render(view, [locals], callback)

这意味着 res.render 可以接受局部变量，不应该设置标题？

【问题讨论】：

您的“呈现 pdf 的函数”是什么？它是一个操作 DOM 的完全客户端 javascript 吗？还是服务器端的？
XHR 旨在通过运行 javascript 的完全加载的客户端页面从服务器接收数据（XHR 是客户端 javascript）。如果你使用 XHR，你会想要做一些 DOM 操作来将数据插入到 HTML 中。
@laggingreflex 我正在使用 pdf.js。它是客户端 js 插件，它将 pdf 渲染成画布。它需要画布id和pdf文件的路径。

标签： javascript node.js pdf.js

【解决方案1】：

你应该返回 json 而不是渲染模板：

app.get('content/index', (req, res) => {
  res.json({data: queryData});
});

【讨论】：

但我还需要渲染页面。这样做只会发送数据，但不会呈现页面。

【解决方案2】：

我正在使用 pdf.js

PDF.js 需要 PDF 文件，例如：

pdfjsLib.getDocument('helloworld.pdf')

我假设你的 queryData 是这样的：

{ filename: 'file.pdf', path: './path/to/file.pdf' }

我不确定您的 content/index 中的内容或路径是什么，但您显然需要找到一种方法来使您的 PDF 文件 ('./path/to/file.pdf') 可用（如下载）。请参阅Express's built-in static server 或res.download() 来执行此操作。

一旦您有可下载的 PDF 文件，将该路径插入 PDF.js 的 .getDocument('/content/file.pdf')，然后将 PDF 渲染到画布上或其他任何地方。

希望对您有所帮助。

【讨论】：