【Javascript】檔案資料處理:透過瀏覽器讀取本機檔案進行文字操作

閱讀時間約 11 分鐘

案例情境

工作上固定頻率會收到User提供的設定需求資訊,檔案大多為Excel的格式.xlsx.xls,需要擷取內容的參數資訊,轉換撰寫sql語法寫入資料庫進行操作。

既然格式都是固定的,何不動手寫個小工具,一鍵完成轉換呢?如此一來,不管設定資料的數量多寡都能瞬間完成處理。更重要的是,萬一User臨時變更需求,只要對方重新提供新的設定檔,作業都是瞬間完成的事,而且程式化也能避免人工手動鍵入更新的錯誤,蠻值得花點時間試試。

實作方式

  1. 將Excel另存成utf-8編碼的csv檔案,避免中文顯示亂碼或問號出現。
  2. 用程式讀取檔案,取得內容參數。
  3. 撰寫程式邏輯,整理輸出成想要的格式。


實作考量

雖然本次主要介紹透過瀏覽器進行處理,但在之前已經先用其他語言進行過實作,下面分別探討實作方式的考量:

Python

既然目標是對本機檔案的讀寫操作,首選一定是後端語言出發,其中最簡單的方式非Python莫屬,只不過,如果受限於公司資訊部門防火牆政策,本機可能無法進行下載或安裝。


Java

如果公司本身使用的語言是Java,大多不會有問題,甚至可以打包輸出成可執行的jar檔,提供給同事們使用。但,除非系統開發上需要,我個人並不喜歡用Java的檔案讀寫處理簡單的小程式。FileReader、FileInputStream、BufferedInputStream或是第三方apacheFileUtilsJava 8Files等等,雖然提供多種方式以應對多樣的使用場景,同時也造成選擇困難。


Javascript

使用Node.js來說,呼叫同步的readFileSync使用上跟Python不會差太多,呼叫非同步的readFile則需要注意實作上的差異,等待callback完成才會讀到資料。同樣,Nodejs也可能會因防火牆政策而不能下載或安裝。

前端網頁其實可以進行檔案上傳跟下載,是否也意味著可以上傳後讓網頁取得檔案,進行處理後,再提供下載功能呢?可行的話,寫好的程式也可以分享出去,畢竟公司內電腦總不會限制不給裝瀏覽器吧?


動手試試

基本版型

打開vscode,新建一個html檔案,鍵入!快速建立版型。

raw-image

body區塊內加入input標籤,並且type="file"

raw-image


用瀏覽器打開index.html確認結果,點擊選擇檔案會叫出檔案總管,可以選擇要上傳的檔案。

raw-image

展示

為了方便使用,加入一個點擊按鈕及一個展示區塊,並且給定展示區塊呈現大小。

<style>
#display_area {
width: 800px;
height: 600px;
}
</style>

<body>
<input type="file" id="source">
<hr>
<button id="display_btn">顯示</button><br>
<textarea id="display_area"></textarea>
</body>

程式邏輯

  1. 習慣上我會把script標籤放在head區塊,在document加入事件監聽器,確保DOM載入完成後才觸發執行main
  2. 腳本語言通常不會有主要的程式進入點,因此我還是會加入一個main function
    由於main function只會執行一次,不會進行複用,也可以inline進去上方監聽的程式中,改以匿名函式ES6的箭頭函式的寫法,只是我個人不喜歡很多層的巢狀。
  3. main中,選取顯示的按鈕並加入監聽click事件,事件觸發handleDisplay
  4. 顯示按鈕點擊觸發後,使用瀏覽器的File api讀取上傳檔案,並將檔案內容以文字進行讀取。
  5. 讀取完成拿到檔案內容,將內容更新到顯示區塊中。
<script>
document.addEventListener("DOMContentLoaded", main);

function main() {
const displayBtn = document.querySelector("#display_btn");
displayBtn.addEventListener("click", handleDisplay);
}


function handleDisplay() {
const source = document.querySelector("#source");
const displayArea = document.querySelector("#display_area");
const file = source.files[0];

const fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = (event) => {
const fileContent = event.target.result;
displayArea.innerHTML = fileContent;
}
}
</script>
  1. 最後把結果丟給AI幫忙做點調整跟優化,加入防呆的錯誤處理跟檔案類型限制,完整程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#display_area {
width: 800px;
height: 600px;
border: 1px solid #ccc;
padding: 10px;
overflow: auto;
white-space: pre-wrap;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const displayBtn = document.querySelector("#display_btn");
displayBtn.addEventListener("click", handleDisplay);
});

function handleDisplay() {
const source = document.querySelector("#source");
const displayArea = document.querySelector("#display_area");
const file = source.files[0];

if (!file) {
displayArea.textContent = "No file selected.";
return;
}

if (!file.type.match('text.*')) {
displayArea.textContent = "Invalid file type. Please select a text file.";
return;
}

const fileReader = new FileReader();
fileReader.readAsText(file);

fileReader.onload = (event) => {
const fileContent = event.target.result;
displayArea.textContent = fileContent;
};

fileReader.onerror = () => {
displayArea.textContent = "Error reading file.";
};
}
</script>
</head>
<body>
<input type="file" id="source">
<hr>
<button id="display_btn">顯示</button><br>
<div id="display_area"></div>
</body>
</html>

成果

選擇本機一個spring-boot專案的pom.xml為例,點擊顯示後,內容顯示在下方文字區塊內。

raw-image



結語

總結一下,上述內容做到的僅有讀取本機上的檔案,將讀到的內容顯示在網頁上,內容即為fileContent

至於資料可以自行使用javascript語法對fileContent做調整,例如處理csv檔案,可透過split處理\r\n拿到每一行,再對,分割取得每一項參數資料值,整理好資料再展示到畫面上。

avatar-img
12會員
64內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現,文件更新往往跟不上新需求的更迭,犯錯的歷史總是不斷重演。因此,我改變了方式,蒐集從程式上、系統上的每一次異常處理過程,好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本,期待日後不管在工作上或交流上遇到難題,都能輕鬆地應答:有什麼難的,我都踩過。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Err500 的其他內容
◆ 句子(sentence)的定義:小寫字母拼成的單字所組成的字串,每個單字間由單一個空白字元進行分隔。 ◆ uncommon的定義:在單一句子內只出現一次,並且沒有出現在另外一句中。 ◆ 給兩個句子s1跟s2,回傳所有符合uncommon定義的單字,可以為任意順序。
本文探討在Linux系統中如何處理字型檔案,包括字型檔的安裝路徑、使用指令進行管理和常見問題的解答。 透過實際測試步驟,讀者將學習如何將字型檔案傳輸到遠端Linux主機,並確認其載入狀況,解決字型未生效及權限不足的問題,提升讀者對Linux操作的熟悉度。
某天在檢視~/AppData/Roaming裡面的資料,看看有沒有垃圾要手動清理,一個不小心砍掉了VSCode的設定資料夾,以至於重新開啟後整個頁面跟剛下載來安裝後的編輯器沒兩樣,乾脆趁這機會整理一下日常配置設定,哪天換新機或是又手殘了也能快速復原歸位。
2024-04-26晚上跟到了在twitch上的直播,ThePrimeagen邀請到了Uncle Bob進行訪談—沒錯,就是那位《Clean Code》、《Clean Architecture》、《Clean Agile》等書的作者Robert C. Martin。
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
原本的計畫是寫系列文,一天嗑一點,雖然完整影片約17小時,分批消化卻花了我近10天,現在回去看我第一天寫的草稿,編輯時間已經是半年前...。
◆ 句子(sentence)的定義:小寫字母拼成的單字所組成的字串,每個單字間由單一個空白字元進行分隔。 ◆ uncommon的定義:在單一句子內只出現一次,並且沒有出現在另外一句中。 ◆ 給兩個句子s1跟s2,回傳所有符合uncommon定義的單字,可以為任意順序。
本文探討在Linux系統中如何處理字型檔案,包括字型檔的安裝路徑、使用指令進行管理和常見問題的解答。 透過實際測試步驟,讀者將學習如何將字型檔案傳輸到遠端Linux主機,並確認其載入狀況,解決字型未生效及權限不足的問題,提升讀者對Linux操作的熟悉度。
某天在檢視~/AppData/Roaming裡面的資料,看看有沒有垃圾要手動清理,一個不小心砍掉了VSCode的設定資料夾,以至於重新開啟後整個頁面跟剛下載來安裝後的編輯器沒兩樣,乾脆趁這機會整理一下日常配置設定,哪天換新機或是又手殘了也能快速復原歸位。
2024-04-26晚上跟到了在twitch上的直播,ThePrimeagen邀請到了Uncle Bob進行訪談—沒錯,就是那位《Clean Code》、《Clean Architecture》、《Clean Agile》等書的作者Robert C. Martin。
上次完成到基本的CRUD及權限控制,後面花了點時間把排序、分頁、圖表總覽的部分做完,其他細節是佈署上線,一般在公司內有專屬的部門處理,僅了解一下流程。
原本的計畫是寫系列文,一天嗑一點,雖然完整影片約17小時,分批消化卻花了我近10天,現在回去看我第一天寫的草稿,編輯時間已經是半年前...。
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
微軟的EXCEL又出了一個新函數了【TRANSLATE】,TRANSLATE這個單字翻譯成中文就是翻譯的意思,他的功能就是"翻譯"。 有了這個函數就可以直接在原有資料進行翻譯,不用再把資料丟到Google翻譯或是GPT了。 🔎函數說明 TRANSLATE(要翻譯的內容,原始語言,翻
Thumbnail
只要會用鍵盤的人,人人都會做EXCEL表格。但是,如果你仔細研究,你或許會發現,工作是否有效率其實可以從一張EXCEL表裡看出來。這篇文章分享幾幾簡單的檢查方法與製作技巧。
在工作中常常會需要用到Excel去整理數據資料,因為近期有在進行作業優化學習,提供網路上10個常用的Excel快捷鍵配置,以及相對應的功能,做為自我複習資料。
Thumbnail
本法省去開啟EXCEL檔,轉存為CSV檔之手動作業,縮短作業時間,提高工作效率,尤其是對象為複數個檔案場合
Thumbnail
這篇文章介紹如何使用VBA程式碼將【包含備註】的Excel檔案轉換為PDF檔。在研究這個問題時,作者花了3個小時多的時間,但後來發現了一個更簡單的方法,這讓作者感到震驚和懷疑人生。最後,作者強調使用他人的智慧來提高自己的能力。文章提供了相關參考文獻和圖片。
Thumbnail
🎗️本次主題成果展示:人力資訊分析 上集回顧 🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗 🔗E
Thumbnail
🎗️本次主題成果展示:人力資訊分析 上集回顧 🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗
Thumbnail
在工作職場上輸入資料時,如果輸入的內容可以觀察出特定的規則時,其實可以使用儲存格格式來快速輸入資料。 舉一個例子,再輸入學生班級時,三年二班要輸入4個字,【三】、【年】、【二】、【班】,但其實觀察一下規律,其中的年跟班都是相同的,那麼就能利用這個規則來偷吃步拉 📌設定儲存格格式 選取範圍
Thumbnail
在職場上,我們經常需要使用Excel來處理資料,而條碼則是一種常見的資料識別方式,可以用來標示產品、貨物、文件等。如果可以快速製作出條碼,就可以節省不少時間,讓工作更有效率。本篇文章將教你如何在Excel中快速製作條碼,只要3個步驟,就可以輕鬆完成。
Thumbnail
在職場上,我們經常需要使用 Excel 表格來處理資料,而自動格式設定可以幫助我們快速將資料整理成一致的格式,讓資料看起來更清晰、更有效率。用 Excel 的快捷鍵自動出現自動格式設定技巧,可以讓我們在更短的時間內套用自動格式,讓工作更輕鬆。
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
微軟的EXCEL又出了一個新函數了【TRANSLATE】,TRANSLATE這個單字翻譯成中文就是翻譯的意思,他的功能就是"翻譯"。 有了這個函數就可以直接在原有資料進行翻譯,不用再把資料丟到Google翻譯或是GPT了。 🔎函數說明 TRANSLATE(要翻譯的內容,原始語言,翻
Thumbnail
只要會用鍵盤的人,人人都會做EXCEL表格。但是,如果你仔細研究,你或許會發現,工作是否有效率其實可以從一張EXCEL表裡看出來。這篇文章分享幾幾簡單的檢查方法與製作技巧。
在工作中常常會需要用到Excel去整理數據資料,因為近期有在進行作業優化學習,提供網路上10個常用的Excel快捷鍵配置,以及相對應的功能,做為自我複習資料。
Thumbnail
本法省去開啟EXCEL檔,轉存為CSV檔之手動作業,縮短作業時間,提高工作效率,尤其是對象為複數個檔案場合
Thumbnail
這篇文章介紹如何使用VBA程式碼將【包含備註】的Excel檔案轉換為PDF檔。在研究這個問題時,作者花了3個小時多的時間,但後來發現了一個更簡單的方法,這讓作者感到震驚和懷疑人生。最後,作者強調使用他人的智慧來提高自己的能力。文章提供了相關參考文獻和圖片。
Thumbnail
🎗️本次主題成果展示:人力資訊分析 上集回顧 🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗 🔗E
Thumbnail
🎗️本次主題成果展示:人力資訊分析 上集回顧 🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗 🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗
Thumbnail
在工作職場上輸入資料時,如果輸入的內容可以觀察出特定的規則時,其實可以使用儲存格格式來快速輸入資料。 舉一個例子,再輸入學生班級時,三年二班要輸入4個字,【三】、【年】、【二】、【班】,但其實觀察一下規律,其中的年跟班都是相同的,那麼就能利用這個規則來偷吃步拉 📌設定儲存格格式 選取範圍
Thumbnail
在職場上,我們經常需要使用Excel來處理資料,而條碼則是一種常見的資料識別方式,可以用來標示產品、貨物、文件等。如果可以快速製作出條碼,就可以節省不少時間,讓工作更有效率。本篇文章將教你如何在Excel中快速製作條碼,只要3個步驟,就可以輕鬆完成。
Thumbnail
在職場上,我們經常需要使用 Excel 表格來處理資料,而自動格式設定可以幫助我們快速將資料整理成一致的格式,讓資料看起來更清晰、更有效率。用 Excel 的快捷鍵自動出現自動格式設定技巧,可以讓我們在更短的時間內套用自動格式,讓工作更輕鬆。