个人中心
gpt4 book ai didi

node.js - 从后端发送一个Excel文件到前端，并在前端下载

转载 作者：行者123 更新时间：2023-12-05 05:07:40 26 4
gpt4 key购买 nike

我使用 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 属性在页面加载时已更改:

enter image description here

注意，在我的电脑上， 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:

enter image description here

关于node.js - 从后端发送一个Excel文件到前端，并在前端下载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58923772/

26 4 0
文章推荐： gaussian - GMM 和 HMM 的区别
文章推荐： ros - Realsense:从点云到深度数据的映射
文章推荐： python - Django-models 将 dateField 的格式更改为 "DD-MM-YYY"
文章推荐： jupyter-notebook - Jupyter 实验室中的只读 Python Notebook
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com