excel4node 使用 next.js api 路由获取请求不触发下载

编程问答 2022-06-01

问题描述

我正在生成一个 excel 文件，并希望通过使用 Next.js 框架触发 API 路由来为客户端下载它。我在使用 fetch 触发下载时遇到问题。下载可以由 window.open(//urlhere,'_self') 触发，但使用 fetch 的 API 调用会根据请求提供此响应：

API resolved without sending a response for /api/download?Students= this may result in stalled requests.

excel4node 文档说我们可以通过这样的 API 发送 Excel 文档：

// sends Excel file to web client requesting the / route
// server will respond with 500 error if excel workbook cannot be generated
var express = require('express');
var app = express();
app.get('/',function(req,res) {
  wb.write('ExcelFile.xlsx',res);
});
app.listen(3000,function() {
  console.log('Example app listening on port 3000!');
});

这是我位于 download.js 的后端 pages/api/：

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import Link from "next/link";
import getPartners from "../../components/main";
import excel from "excel4node";

export default function handler(req,res) {
  const students = req.query.Students.split(",");
  const partners = JSON.stringify(getPartners(students));
  let workbook = createExcelList(partners);
  workbook.write("PartnerList.xlsx",res);
}

const createExcelList = (partnersJSON) => {
  const workbook = new excel.Workbook();
  const partnersObject = JSON.parse(partnersJSON);
  
 /* Using excel4node a workbook is generated formatted the way I want */
  return workbook;
};

export const config = {
  api: {
    bodyParser: true,},};

这是在前端按下按钮时触发的函数。

  const makePartners = async () => {
    let queryStudents = studentList.join(",");
    const url = "http://localhost:3000/api/download?Students=" + queryStudents;
    if (studentList.length !== 0) {
      try {
        const res = await fetch(url,{
          headers: {
            "Content-Type":
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    }
  };

这不会触发下载。但是使用 window.open(url,'_self) 确实如此。因此，我可以通过将函数更改为以下内容来触发下载。但是，我认为这不是正确的做事方式，希望能够了解如何正确使用 fetch。

  const makePartners =  () => {
    let queryStudents = studentList.join(",");
    const url = "http://localhost:3000/api/download?Students=" + queryStudents;
    if (studentList.length !== 0) {
       window.open(url,"_Self");
    }
  };

我不确定这是否是 Next.js 问题。有没有人有任何见解？任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fetch-apiwindow.open