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"); 
     } 
    }); 
} 

代碼沒有經過測試，很可能有錯誤，但應該給你一個解決問題的方法。