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

Question

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

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可以接受局部变量，不应该设置标题吗？

Answer 1

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

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

Answer 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的内置静态服务器或res.download（） 。

PDF文件可供下载后，将该路径插入PDF.js的.getDocument('/content/file.pdf')然后进行其余操作以将PDF呈现到画布或其他任何东西上。

希望能有所帮助。