在ajax success node.js上下载文件

Question

我正在使用node.js构建一个应用程序,需要允许用户下载.csv文件.

问题 - 当用户单击按钮时,应用程序不会将文件作为附件发送到客户端.但是,如果客户端直接转到API链接,该文件将下载.例如 - 如果用户去localhost:3000/api/exportmetric,a文件将作为附件发送到客户端.但如果该路由被作为AJAX请求命中,则没有任何反应.

用户流程:

1)用户单击一个按钮

2)App向服务器发出AJAX GET请求

3)服务器从数据库中检索数据

4)服务器将数据解析为.csv文件

5)服务器将文件发送回客户端以作为附件下载.

我的代码:

client.js

$("#export_velocity").click(function(e) {
    console.log('export to velocity hit');
    $.ajax({
        url: 'http://localhost:3001/api/exportmetric',
        type: 'GET',
        success: function(response) {
            console.log(response);
        },
        error: function(a, b, c) {
            console.log(a);
            console.log(b);
            console.log(c);
        }
    });
});

server.js

router.get('/api/exportmetric', function(req, res) {
    console.log('export metric hit');
    var fields = ['first_name', 'last_name', 'age'];
    var fieldNames = ['First Name', 'Last Name', 'Age??'];
    var people = [
      {
        "first_name": "George",
        "last_name": "Lopez",
        "age": "31"
      }, {
        "first_name": "John",
        "last_name": "Doe",
        "age": "15"
      }, {
        "first_name": "Jenna",
        "last_name": "Grassley",
        "age": "44"
      }
    ];

    json2csv({ data: people, fields: fields, fieldNames: fieldNames }, function(err, csv) {
      res.setHeader('Content-disposition', 'attachment; filename=file.csv');
      res.set('Content-Type', 'text/csv');
      console.log(csv)
      res.status(200).send(csv);
    });
});

Answer 1

基本上有两种流行的方式来下载文件.

1套 window.location

设置window.location为下载URL将下载该文件.

window.location = '/path/to/download?arg=1';

稍微不同的版本是打开带有下载路径的新选项卡

window.open('/path/to/download', '_self');

2.虚拟链接单击

使用HTML5,您可以指定download链接的属性.单击该链接(甚至以编程方式)将触发下载URL.这些链接甚至不需要成为DOM的一部分,您可以动态地创建它们.

var link = document.createElement('a');
link.href = '/path/to/download';
link.download = 'local_filename.csv';
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
link.dispatchEvent(e);

并非所有浏览器都支持此功能,因此即使您要使用此方法,也必须放弃对某些浏览器的支持或回退到第一种方法.

幸运的是,这个出色的答案引用了一个很棒的小js库,它已经完成了所有这些 - http://pixelscommander.com/polygon/downloadjs/#.VrGw3vkrKHv

downloadFile('/path/to/download');

两步下载

您经常会看到的另一个约定是两步下载,其中信息以已知URL发送到服务器,服务器发回可用于下载文件的生成的URL或ID.

如果您希望网址可以共享,或者您必须将大量参数传递给下载生成器或只是想通过POST请求执行此操作,这可能很有用.

$.ajax({
    type: 'POST',
    url: '/download/path/generator',
    data: {'arg': 1, 'params': 'foo'},
    success: function(data, textStatus, request) {
        var download_id = data['id'];
        // Could also use the link-click method.
        window.location = '/path/to/download?id=' + download_id;
    }
});