#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"
.