我使用 Exceljs npm 模块在后端 (Express JS) 创建了一个 Excel 文件。我把它存储在临时目录中。现在我想将文件从后端发送到前端，并在用户单击按钮时将其下载到那里。我对两件事感到震惊 1.如何通过HTTP POST请求将文件从后端发送到前端 2.然后如何在前端下载文件
编辑内容:
我需要前端是一个按钮，将文件附加到它，然后下载它。这是我的代码的样子，我没有从后端到前端正确获取文件
前端文件:
function(parm1,parm2,parm3){
let url =${path}?parmA=${parm1}&parmB=${parm2}&parmC=${parm3};
let serviceDetails = {};
serviceDetails["method"] = "GET";
serviceDetails["mode"] = "cors";
serviceDetails["headers"] = {
"Content-Type": "application/json"
};
fetch(url, serviceDetails)
.then(res => {
if (res.status != 200) {
return false;
}
var file = new Blob([res], { type : 'application/octet-stream' });
a = document.createElement('a'), file;
a.href = window.URL.createObjectURL(file);
a.target = "_blank";
a.download = "excel.xlsx";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}).catch(error => {
return false;
});
}`
router.js
var abc = ... // this is a object for the controller.js file
router.get('/path', function(req, res) {
abc.exportintoExcel(req, res);
});
controller.js
let xyz = ... //this is a object for the service.js file
exports.exportintoExcel = function(req, res) {
xyz.exportintoExcel(reqParam,res);
}
service.js
exportintoExcel(req,response){
//I have a excel file in my server root directory
const filepath = path.join(__dirname,'../../nav.txt');
response.sendFile(filepath);
})
}
最佳答案
这是对早期答案的完全重写，如果有人需要那个答案，我们深表歉意，但这个版本更胜一筹。我正在使用一个用 express-generator 创建的项目并在三个文件中工作:
- routes/index.js
- views/index.ejs
- public/javascripts/main.js
index.ejs
从一个具有 download 属性的 anchor 标记开始，使用您想要的任何文件名和一个空的 href 属性。我们稍后将在 main.js 文件中的 href 中填充一个代表 Excel 文件的 ObjectURL:
<body>
<a id="downloadExcelLink" download="excelFile.xlsx" href="#">Download Excel File</a>
<script type="text/javascript" src="/javascripts/main.js"></script>
</body>
public/javascripts/main.js
选择 anchor 元素，然后向路径/downloadExcel 发出fetch() 请求。将响应转换为 Blob，然后从该 Blob 创建一个 ObjectURL。然后，您可以将 anchor 标记的 href 属性设置为此 ObjectURL:
const downloadExcelLink = document.getElementById('downloadExcelLink');
(async () => {
const downloadExcelResponse = await fetch('/downloadExcel');
const downloadExcelBlob = await downloadExcelResponse.blob();
const downloadExcelObjectURL = URL.createObjectURL(downloadExcelBlob);
downloadExcelLink.href = downloadExcelObjectURL;
})();
routes/index.js
在索引路由器中，您只需调用res.sendFile() 函数并将其传递到您服务器上的Excel 文件的路径。
router.get('/downloadExcel', (req, res, next) => {
const excelFilePath = path.join(__dirname, '../tmp/excel.xlsx');
res.sendFile(excelFilePath, (err) => {
if (err) console.log(err);
});
});
就是这样!你可以找到一个 git repo here的项目。如果您无法让此代码按原样在您的项目中工作，请克隆它并亲自尝试。
工作原理
当页面加载时，4 个请求被发送到我们的服务器，正如我们在控制台输出中看到的那样:
GET / 200 2.293 ms - 302
GET /stylesheets/style.css 200 1.123 ms - 111
GET /javascripts/main.js 200 1.024 ms - 345
GET /downloadExcel 200 2.395 ms - 4679
前三个请求是针对 index.ejs (/)、CSS 样式表和我们的 main.js 文件的。第四个请求是通过调用 main.js 文件中的 fetch('/downloadExcel') 发送的:
const downloadExcelResponse = await fetch('/downloadExcel');
我在这条路线的 routes/index.js 中设置了路线处理程序，它使用 res.sendFile() 从我们的文件系统发送文件作为响应:
router.get('/downloadExcel', (req, res, next) => {
const excelFilePath = path.join(__dirname, '../tmp/excel.xlsx');
res.sendFile(excelFilePath, (err) => {
if (err) console.log(err);
});
});
excelFilePath 需要是您系统上文件的路径。在我的系统上，这是路由器文件和 Excel 文件的布局:
/
/routes/index.js
/tmp/excel.xlsx
从我们的 Express 服务器发送的响应存储在 downloadExcelResponse 中，作为调用 main.js 文件中的 fetch() 的返回值:
const downloadExcelResponse = await fetch('/downloadExcel');
downloadExcelResponse 是一个 Response 对象，出于我们的目的，我们希望使用 Response 将它变成一个 方法:Blob 对象。 blob()
const downloadExcelBlob = await downloadExcelResponse.blob();
现在我们有了 Blob，我们可以调用 URL.convertObjectURL() 将这个 Blob 变成我们可以用作href 下载链接:
const downloadExcelObjectURL = URL.createObjectURL(downloadExcelBlob);
此时，我们在浏览器中有一个表示我们的 Excel 文件的 URL，我们可以通过将 href 添加到我们之前选择的 href 的 DOM 元素来将其指向该 URL 属性:
当页面加载时，我们用这一行选择 anchor 元素:
<a id="downloadExcelLink" download="excelFile.xlsx" href="#">Download Excel File</a>
因此我们将 URL 添加到 href 中，在发出 fetch 请求的函数中:
downloadExcelLink.href = downloadExcelObjectURL;
您可以在浏览器中检查该元素，并看到 href 属性在页面加载时已更改:
注意，在我的电脑上， anchor 标签现在是:
<a id="downloadExcelLink" download="excelFile.xlsx" href="blob:http://localhost:3000/aa48374e-ebef-461a-96f5-d94dd6d2c383">Download Excel File</a>
由于 download 属性出现在链接上，单击链接时，浏览器将下载 href 指向的任何内容，在我们的例子中是 URL到表示 Excel 文档的 Blob。
我从这些来源提取了我的信息:
这是下载过程在我的机器上的样子的 gif:
关于node.js - 从后端发送一个Excel文件到前端，并在前端下载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58923772/