如何正确读取文件（csv 或 txt）并在 JavaScript/Html 中打印其内容？

Question

我的问题如下：

我的公司要求我修改仪表板以便在仪表板上打印更新日期。目前，更新日期保存在 .csv 文件中，该文件加载到 init.py 文件中，即启动仪表板的文件。

我需要直接在 HTML 模板中加载此 date_data.csv，以便在不启动 的情况下保持更新日期更新init.py每天归档。

当我搜索“读取 JavaScript 中的 .txt 或 .csv 文件并打印它”时，我只找到了如何创建一个允许用户自己加载文件的按钮。

我想直接:

用javascript加载文件（date_data.csv），可能在一个字符串变量中。
在 HTML

这看起来很简单，但我没有找到实现它的方法。

<div style="color : white"; align="right"> Most recent update : date </div>

我只需要将上面代码中的 'date' 替换为文件中存在的日期 date_data.csv.

目前我的 csv 看起来像这样：

;date
0;2020-11-09

需要的话我可以改造

Answer 1

您可以通过换行符 (\n) 使用 fetch to request the CSV whenever you load the page. After the request you can split the text (via regex) 来获取所有行。然后，您可以使用正确的分隔符拆分单元格中的每一行。

剩下的就是获取包含日期的单元格并将该值放入 div 元素中。

我以一个开放的数据集为例。根据您的需要更新 CSV_DELIMITER 和 CSV_URL

const CSV_DELIMITER = ",";
const CSV_URL = "https://data.bloomington.in.gov/dataset/ff8cb100-017d-44ef-a05a-37a19ec44611/resource/521fc11c-c18e-417a-b996-a383854805b4/download/2016-first-quarter-stolen-guns.csv";

const getCSV = async (url) => {
  try {
    const response = await fetch(url);
    return await response.text();
  }catch(error) {
    // Error handling
    console.error(error);
  }
}

window.addEventListener("DOMContentLoaded", async () => {
  const dateOutput = document.querySelector("#recent-update");

  const csv = await getCSV(CSV_URL);
  const rows = csv.split(/\n/g);
  const cells = rows.map((row) => row.split(CSV_DELIMITER));
  
  console.log(cells);
  
  const date = cells[1][1];
  
  dateOutput.textContent = `Most recent update : ${date}`;
});

.as-console.wrapper { max-height: 100% !important; }

<div id="recent-update">Most recent update : date</div>

如何正确读取文件（csv 或 txt）并在 JavaScript/Html 中打印其内容？

How to correctly read a file (csv or txt) and print its content in JavaScript/Html?

html

javascript

csv

txt