Question

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

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

我能够将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");
        }
    });
}

但这仍然属于＆＃34;错误显示文件＆＃34;坑。：（

编辑：

通过删除＆＃34; application / pdf＆＃34>来纠正第一个错误。从帖子，但现在它打开一个空的pdf与正确的页面限制

Answer 1

在服务器上，将文件获取代码更改为：

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

代码尚未经过测试，很可能有错误，但应该为您提供另一种解决问题的方法。

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

1 个答案: