使用 sails 在浏览器中显示 pdf 文件

Question

我在目录中有一些文档，我想在浏览器中显示一个嵌入的文档，我将文档的路径保存在 table 中，我可以从中读取路径 table并下载文档，但我不知道如何在浏览器中显示该文件。我正在使用以下代码发送文件：

  loadDocument: async function (req,res){

  var SkipperDisk = require('skipper-disk');
  var fileAdapter = SkipperDisk(/* optional opts */);

  var fd = await Documents.find(
      {
        where: {id:'1'},
        select: ['uploadFileFd']
      }
  ).limit(1);

  let uploadFileFd = fd[0]["uploadFileFd"];

  var fileStream = fileAdapter.read(uploadFileFd);

  fileStream.on('error', function (err){
    return res.serverError(err);
  });

  res.contentType("application/pdf");

  res.set("Content-disposition", "attachment; filename=" + "file"+ fd[0]["id"]+".pdf");

  fileStream.pipe(res);

  },

我想调用该函数并在浏览器中加载 pdf 文件，最好不要重新加载所有页面。

Answer 1

由于您发送的 Content-disposition: attachment header，客户端浏览器将在不尝试打开 built-in PDF 查看器（即 Chrome）的情况下下载 pdf - 尝试使用 inline 代替。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

res.setHeader('Content-type', 'application/pdf');
res.setHeader('Content-disposition', 'inline; filename="file' + fd[0]["id"] + '.pdf"');

Answer 2

我找到了解决问题的方法。首先，我必须创建一种方法来为文件所在的静态文件夹提供服务，我找到了答案 here。

然后我修改代码以使用 'base64-stream':

发送编码为 base64 的数据

      var readStream = fs.createReadStream(uploadFileFd);
      readStream.on('open', function () {
          readStream.pipe(new Base64Encode()).pipe(res);
      });
      readStream.on('error', function(err) {
        res.end(err);
      });

最后我在浏览器中显示pdf文件如下：

     .done(function(data){
          var parent = $('embed#pdf').parent();
          var newElement = "<embed src=data:application/pdf;base64,"+data+" id='pdf' width='100%' height='1200'>";
          $('embed#pdf').remove();
          parent.append(newElement);
        })

现在我可以在浏览器中显示我自己页面中嵌入的 pdf 文件，感谢所有试图提供帮助的人。

使用 sails 在浏览器中显示 pdf 文件

Display a pdf file in the browser with sails

html

node.js

sails.js