javascript 使用fetch方法和NodeJ路由时出错[已关闭]

c3frrgcw  于 2023-02-18  发布在  Java
关注(0)|答案(2)|浏览(131)

6小时前关门了。
Improve this question
我在JavaScript中使用fetch方法和NodeJS路由时遇到问题。

    • 我的JS代码:**
fetch(url, {
  method: 'POST',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  credentials: 'same-origin',
  body: JSON.stringify({ ids: arrayIds })
}).then(function(response) {
  return response.json();
}).then(function(data) {
  if (data.reload) {
    document.location.reload();
  } else if (data.url) {
    document.location.href = data.url;
  }
});
    • 我的NodeJS路由:**
function _postMultiplePrint(request, response) {
  var fonts = {
        Roboto: {
          normal: 'public/fonts/OpenSans-Regular.ttf',
          bold: 'public/fonts/OpenSans-Bold.ttf',
          italics: 'public/fonts/OpenSans-Italic.ttf',
          bolditalics: 'public/fonts/OpenSans-BoldItalic.ttf'
        }
      },
      printer = new PdfPrinter(fonts),
      docDefinition, pdfDoc;

  docDefinition = {
    content: [
      {
        text: 'This paragraph fills full width, as th'
      }
    ],
    pageSize: 'A4',
    pageMargins: [72, 72],
    footer: {},
    background: {}
  };

  pdfDoc = printer.createPdfKitDocument(docDefinition);
  response.setHeader('Content-type', 'application/pdf');
  response.setHeader('Content-disposition', 'inline; filename="book.pdf"');
  pdfDoc.pipe(response);
  pdfDoc.end();
  response.send(JSON.stringify({ reload: false, url: '' }));
}
    • 我的问题:**我的book.pdf在不使用fs编写时无法加载到页面中。
    • 它可以使用以下代码,但我在服务器上编写文件,我不想这样做:**
function _postMultiplePrint(request, response) {
  var fonts = {
        Roboto: {
          normal: 'public/fonts/OpenSans-Regular.ttf',
          bold: 'public/fonts/OpenSans-Bold.ttf',
          italics: 'public/fonts/OpenSans-Italic.ttf',
          bolditalics: 'public/fonts/OpenSans-BoldItalic.ttf'
        }
      },
      printer = new PdfPrinter(fonts),
      docDefinition, pdfDoc;

  docDefinition = {
    content: [
      {
        text: 'This paragraph fills full width, as th'
      }
    ],
    pageSize: 'A4',
    pageMargins: [72, 72],
    footer: {},
    background: {}
  };

  pdfDoc = printer.createPdfKitDocument(docDefinition);
  pdfDoc.pipe(fs.createWriteStream('./public/uploads/book.pdf'));
  pdfDoc.end();
  response.send(JSON.stringify({ url: '/uploads/book.pdf' }));
}
pxq42qpu

pxq42qpu1#

每个HTTP请求可以有且只能有一个响应。
JS发出一个HTTP请求,然后服务器端代码尝试使用PDF(response.setHeader('Content-type', 'application/pdf'); response.setHeader('Content-disposition', 'inline; filename="book.pdf"'); pdfDoc.pipe(response); pdfDoc.end();JSON(response.send(JSON.stringify({ reload: false, url: '' }));)进行响应。
两种回答。没用的。
此外,Content-disposition将被忽略,因为它是由 AJAX 发起的请求,而不是由常规浏览器导航发起的请求。

vc9ivgsu

vc9ivgsu2#

第一个后端代码很好,只是与前端不兼容。
后端

pdfDoc = printer.createPdfKitDocument(docDefinition);
response.setHeader('Content-type', 'application/pdf');
response.setHeader('Content-disposition', 'inline; filename="book.pdf"');
pdfDoc.pipe(response);
pdfDoc.end();

// The below code must be remove 
// since the response has been sent by pdfDoc.pipe(response);
// response.send(JSON.stringify({ reload: false, url: '' })); // <- remove this line

如果您的路由是POST方法,则为前端

const form = document.createElement("form");

// Define your route here
form.setAttribute("action", "http://localhost:8000");
form.setAttribute("method", "POST");

const btn = document.createElement("button");
btn.setAttribute("type", "submit");
form.appendChild(btn);
document.body.appendChild(form);
btn.click();

如果路由是GET方法,则为前端

window.open("http://localhost:8000");

相关问题