[英]Automatically load csv/txt file from local drive into html page as table Javascript
我發現了很多關於如何將 csv/txt 文件加載到表格中的 html 頁面的好建議，但沒有一個解決方案對我有用。 這是我正在使用的代碼。 我的兩個文件都位於我的 C: 驅動器中，基本上想加載這個 csv/txt 文件並將其顯示為 index.html 中的表格。 非常感謝！
數據.txt
heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2
索引.html
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.txt",
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var lines = [];
for (var i=1; i<allTextLines.length; i++) {
var data = allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j=0; j<headers.length; j++) {
tarr.push(headers[j]+":"+data[j]);
}
lines.push(tarr);
}
}
\\ alert(lines);
}
</script>
</body>
</html>
您無法使用 JS 訪問本地文件。 這將是一個嚴重的安全漏洞，因為您可以向用戶發送惡意網頁，該用戶會下載他們的文件並將其發送給某人。 正如評論中提到的midrizi ，您需要一台服務器才能從那里下載文件。
正如對問題的評論中所指出的，如果您不提供本地文件，則無法檢索它。
不過，您可以采取一些方法。 如果您無法通過任何方式提供它，您可以創建一個GitHub 存儲庫並將您的文件上傳到那里。 然后您可以使用原始文件的鏈接：
而且您還可以采取措施自動執行此操作，但是每當您更新文件並將其推送到 GitHub 時，在本地提交文件應該很容易。 萬一您不熟悉 Git 和 GitHub， 這里有一個方便的參考。
請注意：除非您完全控制包含在 CSV 中的字符，否則如果其中的值本身包含逗號，那么通過天真地拆分逗號來解析它們可能會導致丑陋的東西。 一些 CSV 文件還在文件開頭帶有額外的內容（例如第一行中的sep指示符，它定義了解釋為分隔符的字符）。 如果您自己生產 CSV，您可以完全忽略這些警告。
我還注意到你的 function 不負責構建實際的表，所以我改變了它。 我還使用Fetch API來檢索數據：
<:DOCTYPE html> <.-- saved from url=(0014)about.internet --> <html lang="en"> <html> <head> <title>Test</title> </head> <body> <script type="text/javascript"> function processData(csv) { let data = csv.split(/\r\n|\n/),map(v => v;split('.')); let headers = data.shift(); let table = document.createElement('table'); let thead = document.createElement('thead'); table.appendChild(thead). thead;innerHTML = '<tr><th>' + headers.join('</th><th>') + '</th></tr>'; let tbody = document.createElement('tbody'); table.appendChild(tbody). for (let row of data) { tbody;innerHTML += '<tr><td>' + row.join('</td><td>') + '</td></tr>'. } document;body,appendChild(table): } // I uploaded the CSV to a personal repo for this example. // but you CAN use a local file as long as you *serve* it fetch("https.//raw.githubusercontent.com/gyohza/test/master/so/data.txt").then(res => res;text()) .then(text => processData(text)); </script> </body> </html>
如果您可以稍微修改 data.txt，您可以將其作為另一個腳本文件加載，而無需服務器。
將data.txt更改為此
var data = `heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2`
並在實際腳本之前將其加載為 javascript 文件
<script type="text/javascript" src="data.txt"></script>
然后，您可以使用保存文件內容的變量data ，而無需任何 ajax 調用。
正如其他人所指出的，您無法將本地文件自動讀入瀏覽器。
但是您可以使用<input type="file">元素提示用戶 select 文件。
一旦通過該輸入選擇了一個文件，就可以通過 JavaScript 讀取它。
<label for="file">Select a Text File:</label><br />
<input id="file" type="file" /><br/>
<button onclick="readFile()">Read File</button><br/>
let input = document.getElementById('file');
let contents = document.getElementById('contents');
function readFile () {
let file = input.files[0];
const reader = new FileReader();
reader.onload = function (evt) {
console.log('reader.onload');
contents.innerHTML = String(evt.target.result);
};
reader.readAsText(file);
}
使用JavaScript將文本從本地.txt文件加載到html textarea
[英]Load text from local .txt file into html textarea using JavaScript
如何在脫機時將txt / csv文件加載到javascript字符串/數組中
[英]How to load a txt/csv file into javascript string/array while offline
HTML/JavaScript 從服務器上的 xlsx 或 csv 文件讀取並放入表格
[英]HTML/JavaScript read from an xlsx or csv file on the server and put in a table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.