Javascript Node.js-jQuery。从服务器获取PDF并显示在前端
我有点困在这里了。我的目的是首先从静态文件夹+子文件夹中获取所有文件名,并在前端列出所有文件名 当用户单击其中一个文件名(主要是pdf文件名)时,服务器将返回所选项目的内容 我可以将pdf数据作为二进制文件发送到前端,但如何使用js/jQuery在新选项卡中显示数据 到目前为止 Server.js-Javascript Node.js-jQuery。从服务器获取PDF并显示在前端,javascript,jquery,node.js,ajax,pdf,Javascript,Jquery,Node.js,Ajax,Pdf,我有点困在这里了。我的目的是首先从静态文件夹+子文件夹中获取所有文件名,并在前端列出所有文件名 当用户单击其中一个文件名(主要是pdf文件名)时,服务器将返回所选项目的内容 我可以将pdf数据作为二进制文件发送到前端,但如何使用js/jQuery在新选项卡中显示数据 到目前为止 Server.js- // Importing and initializing npm/node plugins var app = require('express')(); var server = require
// 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");
}
});
}
但这会一直陷入显示文件的错误坑中:
编辑:
通过从post中删除应用程序/pdf纠正了第一个错误,但现在在服务器上打开具有正确页面限制的空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,并在Express中使用内置的sendFile方法。那么在前端就容易多了。您可以取消showFile函数,只需更新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");
}
});
}
代码还没有经过测试,很可能有错误,但应该能为您提供解决问题的另一种方法的要点。Wow nice。这是一种非常巧妙的方法,可以消除不必要的代码: