iT邦幫忙

2

html import csv擋

  • 分享至 

  • xImage

大家好,最近有一個需求,我需要用HTML讀取CSV擋內資料並匯出,
以下是我在網路上找到的程式碼,但我今天是要自動化,
我的CSV檔在我的本機D:\User\Desktop\output.csv
我不想還要手動選擇檔案,我嘗試過在
https://ithelp.ithome.com.tw/upload/images/20211224/201071121JsObC89ac.jpg
中加上value
https://ithelp.ithome.com.tw/upload/images/20211224/20107112BDelx1pftj.jpg
但無法運作,想請問各位還有什麼方法或方式可以讓我自動抓取固定位置csv資料自動匯入,謝謝

<form id="myForm">
  <input type="file" id="csvFile" accept=".csv"/>
  <br />
  <input type="submit" value="Submit" />
</form>


<script>
  
  var myForm = document.getElementById("myForm");
  var csvFile = document.getElementById("csvFile");

  myForm.addEventListener("submit", function (e) {
    
    e.preventDefault();
    var input = csvFile.files[0];
    alert(input);
    var reader = new FileReader();

    reader.onload = function (e) {
      var text = e.target.result;
      document.write(text);
    };

    reader.readAsText(input);
  
  });
 // myForm.submit(); 自動送出
</script>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
3
Felix
iT邦研究生 2 級 ‧ 2021-12-24 12:19:56

取得文件,不能預設 value 屬性的值。

如果您要取得已知文件的內容,您應該發出請求:

function read(path) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', path, false);
    xhr.addEventListener('load', () => {
        if (xhr.status !== 200 || xhr.status !== 0) return;
        document.write(xhr.responseText);
    });
    xhr.send();
}
read('output.csv');
看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2021-12-24 13:01:44 檢舉

不能這樣取得file吧。

Felix iT邦研究生 2 級 ‧ 2021-12-24 13:08:19 檢舉

如果架設 Server 就行了吧,我不知道路徑才會這樣寫。
我改了路徑,感謝您的提醒。

可以把output.csv放在同一個目錄~
但是放在目錄以外是讀不到(會被系統權限擋住@@~

Felix iT邦研究生 2 級 ‧ 2021-12-24 14:53:40 檢舉

純真的人

謝謝您!

不好意思,想問一下,您這兩段是我直接複製到我那隻程式就好了嗎?因為我發現複製上去也沒動靜,是否有什麼地方要做更改,謝謝!

Felix iT邦研究生 2 級 ‧ 2021-12-24 20:43:55 檢舉

zqazxws123

架設 Server 後,再將 output.csv 儲存至根目錄就能使用了。

建議您使用 USBWebServer 套件,解壓縮後會有一個名為 root 的根目錄,將 output.csv 儲存至此,再建立一個 HTML 檔案,並套用上方的程式碼就能取得文件內容了。

1
froce
iT邦大師 1 級 ‧ 2021-12-24 13:05:53

正確的作法是你得在本機建立一個web server,然後透過XHR、fetch、ajax取得檔案,或是寫爬蟲去填值。
純用html和js做不到這件事,因為安全性的問題。

看更多先前的回應...收起先前的回應...

您好,我CSV檔來源就是python爬蟲,
但我並不明白python爬到的資料該如何放入另一個HTML,因此我才選擇爬蟲完匯出成csv,再由其他程式去讀csv資料

froce iT邦大師 1 級 ‧ 2021-12-24 13:40:23 檢舉

你輸入目標網頁是同一臺電腦嗎?

julions iT邦新手 5 級 ‧ 2021-12-24 14:10:03 檢舉

Thanks for helping us...I somehow get the solution by using your suggestion.
Regards, Julion_Will

是的
同一台

froce iT邦大師 1 級 ‧ 2021-12-24 14:41:50 檢舉

同一臺就像上面純真的人講的一樣,爬蟲輸出的和你的html放同一資料夾,用XHR去拿就好。

我要發表回答

立即登入回答