如何使用 javascript 導入本地 csv 文件以創建 html 表？

Question

我有一個 python 程序，它從數據幀創建 csv 文件。 我想通過使用 javascript 導入本地存儲的 csv 文件來創建 html 表。 我有以下代碼片段，但它不起作用，並且在 html 頁面上僅顯示空白屏幕-

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        table {
            border-collapse: collapse;
            border: 2px black solid;
            font: 12px sans-serif;
        }

        td {
            border: 1px black solid;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
    <script src="d3.min.js?v=3.2.8"></script>

    <script type="text/javascript"charset="utf-8">
        d3.text("C:\Users\hp\Documents\Atom\airlines_final.csv", function(data) {
            var parsedCSV = d3.csv.parseRows(data);

            var container = d3.select("body")
                .append("table")

                .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")

                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .text(function(d) { return d; });
        });
    </script>
</body>
</html>

誰能告訴我我做錯了什么或指導我找到我可以使用的正確代碼？

Answer 1

您無法通過瀏覽器訪問本地文件，因為這將是一個明顯的安全漏洞。 但是，您可以使用輸入 select 文件，然后訪問該選定文件。 請參閱此示例以解決您的問題。

Answer 2

歡迎來到堆棧：您應該嘗試一些事情：

查看您的互聯網瀏覽器的“控制台”，看看是否有任何錯誤。
檢查文件權限和文件是否存在。
您如何導入 d3 看起來很可疑。 要消除此錯誤原因，請取消注釋第一個導入，注釋掉第二個。

在第 2 步和第 3 步后重試第 1 步。

如何使用 javascript 導入本地 csv 文件以創建 html 表？

問題描述

2 個解決方案

解決方案1
0 2022-02-02 17:42:50

解決方案2
0 2022-02-02 17:44:18

如何使用 javascript 導入本地 csv 文件以創建 html 表？

問題描述

2 個解決方案

解決方案1 0 2022-02-02 17:42:50

解決方案2 0 2022-02-02 17:44:18

解決方案1
0 2022-02-02 17:42:50

解決方案2
0 2022-02-02 17:44:18