如何正确读取文件(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_data.csv.中的日期替换上面代码中的"日期">

目前我的csv是这样的：

;date
0;2020-11-09

如果需要的话，我可以改造它。

Answer 1

无论何时加载页面，都可以使用fetch请求CSV。在请求之后，您可以通过换行符(n(分割文本(通过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>