后端的 ExpressJS res.download() + 前端的 fetch答案

【问题标题】：ExpressJS res.download() on backend + fetch on frontend后端的 ExpressJS res.download() + 前端的 fetch
【发布时间】：2020-05-28 04:48:22
【问题描述】：

对不起，如果这是一个菜鸟问题，但我无法让它工作......

我有一个使用 NodeJS 和 ExpressJs 并提供一些使用 VueJS 构建的静态内容的后端。

我想允许用户下载文件，所以我正在尝试实现它。

在后端，这里是代码

    app.get('/download', function (req, res, next) {
    let queryparams = req.query;
    if (queryparams.filename) {
        try {
            res.download(queryparams.filename); 
        } catch (error) {
            console.log('Unable to read ' + queryparams.filename + ' file. Please check');
            res.write('Unable to read ' + queryparams.filename + ' file. Please check');
            res.status(501);

        }
        res.end();
    } else {
        next();
    }
});

在前端，我尝试使用 downloadjs npm package 这个，但它不起作用，而且我需要它吗？

fetch(`https://${servername}/download?filename=` + data.filename)
    .then((response) => response.blob())
    .then((blob) => downloadjs(blob, data.filename));

任何帮助将不胜感激

鲍勃

【问题讨论】：

你能在 blob 上打印内容吗？
什么是控制台日志，运行代码的结果是什么？你试过什么？在任何似乎合理怀疑的地方设置断点和记录变量。我的猜测，控制台记录您发送的所有疯狂的 concat 等，确保这是合法的..然后用您尝试过的内容以及不同场景产生的各种结果更新您的答案。请:) 谢谢！

标签： node.js express vue.js

【解决方案1】：

这就是我在我的 express 应用程序上实现下载的方式。当用户访问此特定 URL 时，他们将自动下载该文件。这是我正在从事的项目的代码 sn-p。希望对你有帮助

router.get('/frontliners/file.csv', function (req, res) {
    controller.airtableFrontliners((output) => {
        res.status(200)
        const file = `${__dirname}/data.csv`; // Get the path of the file
        res.download(file); 
    })
});

【讨论】：

【解决方案2】：

您缺少的是您尝试下载的文件的路径。

app.get('/download', function (req, res, next) {
    if (req.query.filename) {
        try {
            res.download(req.query.filename); 
        } catch (error) {
            console.log('Unable to read ' + req.query.filename + ' file. Please check');
            res.write('Unable to read ' + req.query.filename + ' file. Please check');
            res.status(501);
        }
        res.end();
    } else {
        next();
    }
});

如果我们在 res.download(queryparams.filename) 部分查看您的代码，您会丢失将要下载的文件的相对路径（如果您不知道，还有文件扩展名类型）。

假设我点击这个网址，例如：http://.../download/day1.json。
代码会将其解释为 res.download("day1.json") 对，但它不知道在哪里查找该文件。

因此，如果您将其更改为 res.download("./downloadables/day1.json")，则会下载文件 day1.json，因为代码可以导航到位于代码根目录中可下载目录中的该文件。
进行如下所示的更改可以帮助您解决此问题。

app.get('/download', function (req, res, next) {
    if (req.query.filename) {
        try {
            // Adding ticks for string fomatting
            res.download(`./${req.query.filename}`); 
        } catch (error) {
            console.log('Unable to read ' + queryparams.filename + ' file. Please check');
            res.write('Unable to read ' + queryparams.filename + ' file. Please check');
            res.status(501);
        }
        res.end();
    } else {
        next();
    }
});

【讨论】：