Следующий запрос на получение js и загрузка csv из Flask

#javascript #python #reactjs #flask #next.js

#язык JavaScript #питон #реагирует на #колба #next.js

Вопрос:

У меня проблема в том, что мне уже удалось загрузить CSV из Flask (localhost5000). И я набираю localhost5000/загрузить, файл можно успешно загрузить.

Однако, когда я использую следующий Js для извлечения URL-адреса, это показывает ошибку «Неперехваченная (в обещании) синтаксическая ошибка: JSON.parse: неожиданный символ в строке 1 столбца 1 данных JSON» — — — Это response.json().

После этого я использую response.text(). Данные можно извлечь и отобразить в моей консоли, но мне нужно загрузить CSV.

Может ли кто-нибудь помочь мне решить эту проблему?

Вот мой код Nextjs

 import React from "react"; import Layout from "@/components/Layout"; import { API_URL } from "../config"; export default function adminpage() {  const downloadCSV = async (e) =gt; {  e.preventDefault();  const response = await fetch(`${API_URL}/download`, {  method: "GET",  headers: {  "Content-Type": "application/json",  },  });  const data = await response.text();  console.log(data);  };   return (  lt;Layoutgt;  lt;h1gt;Here is admin pagelt;/h1gt;  lt;button onClick={downloadCSV}gt;Download report (CSV)lt;/buttongt;  lt;/Layoutgt;  ); }  

И вот мой код колбы

 @app.route("/download", methods=["GET", "POST"]) def download():  file_data = Applicant.query.all()     with open('output.csv', 'w', newline='') as csvfile:  # Use CSV writer module  writer = csv.writer(csvfile)   # Write first row (Header)  writer.writerow(["Id", "FirstName", "LastName"])   # Write all information from Sqlite db  for i in file_data:  writer.writerow([i.id, i.firstName, i.lastName])     return flask.send_file('output.csv', as_attachment=True)    

Наконец, я нашел этот код, который подходит для моей цели. Вот следующий код интерфейса JS.

 import React from "react"; import Layout from "@/components/Layout"; import { API_URL } from "../config"; export default function adminpage() {   const downloadCSV = async (e) =gt; {     // Prevent Form submit, the form will refresh too fast and can't be sent the data to backend database if no prevent default     e.preventDefault();     const response = await fetch(`${API_URL}/download`, {       method: "GET",       headers: {         "Content-Type": "application/json",       },     });     const data = await response.blob();      // Create a blob with the data we want to download as a file     //  ***Need to change {type: "jpg/mp3/csv or other"}     const blob = new Blob([data], { type: "csv" });     // Create an anchor element and dispatch a click event on it     // to trigger a download     const a = document.createElement("a");     //  ***Need to change "output.csv" =gt; This is a file name can be changed     a.download = "output.csv";     a.href = window.URL.createObjectURL(blob);     const clickEvt = new MouseEvent("click", {       view: window,       bubbles: true,       cancelable: true,     });     a.dispatchEvent(clickEvt);     a.remove();   };    return (     lt;Layoutgt;       lt;h1gt;Here is admin pagelt;/h1gt;       lt;button onClick={downloadCSV}gt;Download report (CSV)lt;/buttongt;     lt;/Layoutgt;   ); }  

Комментарии:

1. При загрузке CSV-файлов ваш Content-Type заголовок должен быть установлен на "text/csv" .