[节点] [角度]如何下载节点生成的Excel文件 [英] [Node][Angular] How to download excel files generated by node

问题描述

我目前正在前端有角度的节点中构建Web应用程序.我想添加一个选项，客户端可以在其中下载生成的Excel文件.目前，我有一些可以生成几个excel文件的工作代码，这些文件当前存储在服务器上的地图中.我想要的是用户现在可以下载这些文件，并且在下载时，这些文件将被删除.我不知道什么是最佳做法.这是我一直在考虑的一些选择:

I am currently building a web app in node with angular front end. I want to add an option where the client can download generated excel files. Currently I have some working code that can generate several excel file which are currently stored in a map on the server. What I want is that the user can now download these files and when it is downloaded, the files will be deleted. I don't know what is best practice for this. Here are some options I have been considering:

• 我将在Azure上部署该应用程序，并能够将其作为blob存储在Azure上.因此，我可以提供一个网址以直接从azure blob下载
• 也许我可以将数据作为json发送回去，并让angular生成excel文件?
• 还是我可以将其保留在原处，然后让节点处理下载?
• 还是其他?

关于我可以做什么以及如何实现它的任何建议?

Any suggestions on what I could do and how I can implement it?

我正在生成带有节点包'exceljs'的excel文件

I am generating the excel files with the node package 'exceljs'

提前谢谢！

感谢给出的答案和更多的谷歌搜索功能，我找到了我想要的答案.我做了一点修改，因为我现在正在发送一个zip文件，但它也可以与excel文件一起使用.

Thanks to the given answers and a little more googling I have found the answer I was looking for. I have slightly modified it because I am now sending a zip file but it will also work with an excel file.

用于在节点中发送zip文件:

For sending a zip-file in node:

var archive = archiver.create('zip', {});
archive.pipe(res);
archive.directory(dateDir, name).finalize();

用于在节点中发送Excel文件:

For sending an excel-file in node:

res.setHeader('Content-Type', 'application/vnd.ms-excel');
res.setHeader('Content-disposition', 'attachment; filename=test.xlsx');
workbook.xlsx.write(res).then(function () {
    res.end();
});

为了接收有角度的文件，我使用FileSaver.js如下:

For receiving the file in angular I used FileSaver.js as following:

$http({
      url: url,
      method: 'POST',
      headers: headers,
      data: data,
      responseType: 'arraybuffer'
    })
      .success(function (data, status, headers) {
         /*var fileName = headers('Content-Disposition');
         console.log(fileName);*/
        saveAs(new Blob([data], {type: contentType}), 'download.zip');
      })

推荐答案

在@Brij Raj Singh-MSFT的解决方案之后，我认为您可以在AngularJS的单个URL的两个步骤中实现它.

Following the solution of @Brij Raj Singh - MSFT, I think you can implement it in the two steps of individual urls for AngularJS.

第一步:AngularJS向URL A发送一个http请求，以生成它渲染数据以生成文件，然后返回包含URL B的JSON数据以及生成的文件名以供下载.

First step: AngularJS send an http request to URL A for generating that it render data to generate a file, and return back the JSON data include URL B with the generated file name for downloading.

// write to a file 
var workbook = createAndFillWorkbook();
var filename = '<yourfilename>';
// response a url with file name generated
res.write('{"download_url": "/download/"+filename, "name": "XXX"}');

AngularJS将接收到的JSON数据呈现到链接标签<a href="/download/xxx.xlsx">XXX</a>.

AngularJS render the JSON data received to a link tag <a href="/download/xxx.xlsx">XXX</a>.

第二步:用户单击下载链接，服务器发送回文件响应，然后在下载后删除文件.

Second step: User click the download link and the server send back a file response, then delete the file after downloaded.

var file = __dirname + '/upload-folder/<yourfilename extracted from url>.xlsx';

var filename = path.basename(file);
var mimetype = mime.lookup(file);

res.setHeader('Content-disposition', 'attachment; filename=' + filename);
res.setHeader('Content-type', mimetype);

var filestream = fs.createReadStream(file);
filestream.pipe(res);

filestream.on('close', function (error) {
    if (err) return res.send(500);
    fs.unlink(__dirname + '/upload-folder/<yourfilename>.xlsx');
});

fs.unlink(file);

这篇关于[节点] [角度]如何下载节点生成的Excel文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！