Node.js - jQuery。从服务器获取PDF并在前端显示

Question

我有点卡在这里。我的意图是首先从静态文件夹+子文件夹获取所有文件（文件名），并在前端列出所有文件。

当用户点击其中一个文件名（主要是pdf）时，服务器返回选定的项目内容。

我能够将pdf数据作为二进制发送到前端，但是如何将数据显示在带有js/jQuery的新选项卡中？

到目前为止..

Server.js -

// Importing and initializing npm/node plugins 
var app = require('express')(); 
var server = require('http').createServer(app); 
var logger = require('morgan'); 
var bodyParser = require('body-parser'); 
var pdf = require('express-pdf'); 
var cors = require('cors'); 
var fs = require('fs'); 

// Import config settings 
var config = require('./config.json'); 

app.use(logger('dev')); 

// Allow application/x-www-form-urlencoded and application/json 
app.use(bodyParser.urlencoded({ 
    extended: false 
})); 

app.use(bodyParser.json({ 
    limit: '50mb' 
})); 

app.use(cors()); 

app.use(pdf); 

app.get('/getfiles', function (req, res) { 
    var dir = config.sourceDir; 

    var foundFiles = []; 

    fs.readdir(dir, function (err, files) { 
     if (err) { 
      console.log('Error reading ' + dir); 
      process.exit(1); 
     } 
     console.log('Listing files in Directory ' + dir); 
     files.forEach(function (f) { 
      foundFiles.push(f); 
     }); 
     res.json(foundFiles); 
    }); 
}); 

app.post('/showfiles', function (req, res) { 
    var file = req.body.filename; 
    var dir = config.sourceDir; 
    fs.readFile(dir + file, function (err, data) { 
     res.contentType('application/pdf'); 
     res.send(data); 
    }); 
}); 

// Open server in port 
server.listen(config.port, function() { 
    console.log('Server listening on port: ' + config.port); 
}); 

module.exports = app; 

在前端 -

$(function() { 

    getFiles(); 

}); 

function getFiles() { 
    $.ajax({ 
     type: "GET", 
     url: "http://localhost:3000/getfiles", 
     contentType: "application/json; charset=utf-8", 
     crossDomain: true, 
     dataType: "json", 
     success: function (data, status, jqXHR) { 
      if (data) { 
       $.each(data, function (index, value) { 
        $("#listContainer1").append("<li><a href='#' onclick='showFile(this)'>" + value + "</a></li>"); 
       }); 
      } 
     }, 
     error: function (jqXHR, status) { 
      console.log("Error fetching data"); 
     } 
    }); 
} 

function showFile(file) { 
    $.ajax({ 
     type: "POST", 
     data: JSON.stringify({ 
      "filename": $(file).text() 
     }), 
     url: "http://localhost:3000/showfiles", 
     contentType: "application/json; charset=utf-8", 
     crossDomain: true, 
     dataType: "application/pdf", 
     success: function (data, status, jqXHR) { 
      if (data) { 
       var file = new Blob([data], { 
        type: 'application/pdf' 
       }); 
       var fileURL = URL.createObjectURL(file); 
       window.open(fileURL); 
      } 
     }, 
     error: function (jqXHR, status) { 
      console.log("Error showing file"); 
     } 
    }); 
} 

但这保持落入 “错误显示文件” 坑。 :(

编辑：

的第一个错误是通过从帖子上的“应用程序/ PDF”纠正，但现在它的打开与正确的页数限制

Answer 1

空PDF在服务器上，更改文件取出码本：

app.get('/showfiles/:filename', function (req, res) { 
    var options = { 
    root: config.sourceDir 
    }; 

    var fileName = req.params.filename; 
    res.sendFile(fileName, options, function (err) { 
    if (err) { 
     // Handle error 
    } else { 
     // Handle success 
    } 
    }); 
}); 

所以我切换到GET方法和使用内置在快速SENDFILE方法然后在前端，它更容易，您可以摆脱演出文件的功能，只是更新。 getFiles函数：

function getFiles() { 
    $.ajax({ 
     type: "GET", 
     url: "http://localhost:3000/getfiles", 
     contentType: "application/json; charset=utf-8", 
     crossDomain: true, 
     dataType: "json", 
     success: function (data, status, jqXHR) { 
      if (data) { 
       $.each(data, function (index, value) { 
        $("#listContainer1").append('<li><a href="http://localhost:3000/showfiles/'+value+'" target="_blank">' + value + '</a></li>'); 
       }); 
      } 
     }, 
     error: function (jqXHR, status) { 
      console.log("Error fetching data"); 
     } 
    }); 
} 

代码没有经过测试，很可能有错误，但应该给你一个解决问题的方法。