【Javascript】檔案資料處理：透過瀏覽器讀取本機檔案進行文字操作
閱讀時間約 2 分鐘
案例情境
工作上固定頻率會收到User提供的設定需求資訊，檔案大多為Excel的格式.xlsx或.xls，需要擷取內容的參數資訊，轉換撰寫sql語法寫入資料庫進行操作。
既然格式都是固定的，何不動手寫個小工具，一鍵完成轉換呢？如此一來，不管設定資料的數量多寡都能瞬間完成處理。更重要的是，萬一User臨時變更需求，只要對方重新提供新的設定檔，作業都是瞬間完成的事，而且程式化也能避免人工手動鍵入更新的錯誤，蠻值得花點時間試試。
實作方式
- 將Excel另存成
utf-8編碼的csv檔案，避免中文顯示亂碼或問號出現。 - 用程式讀取檔案，取得內容參數。
- 撰寫程式邏輯，整理輸出成想要的格式。
實作考量
雖然本次主要介紹透過瀏覽器進行處理，但在之前已經先用其他語言進行過實作，下面分別探討實作方式的考量：
Python
既然目標是對本機檔案的讀寫操作，首選一定是後端語言出發，其中最簡單的方式非Python莫屬，只不過，如果受限於公司資訊部門防火牆政策，本機可能無法進行下載或安裝。
Java
如果公司本身使用的語言是Java，大多不會有問題，甚至可以打包輸出成可執行的jar檔，提供給同事們使用。但，除非系統開發上需要，我個人並不喜歡用Java的檔案讀寫處理簡單的小程式。FileReader、FileInputStream、BufferedInputStream或是第三方apache的FileUtils、Java 8的Files等等，雖然提供多種方式以應對多樣的使用場景，同時也造成選擇困難。
Javascript
使用Node.js來說，呼叫同步的readFileSync使用上跟Python不會差太多，呼叫非同步的readFile則需要注意實作上的差異，等待callback完成才會讀到資料。同樣，Nodejs也可能會因防火牆政策而不能下載或安裝。
前端網頁其實可以進行檔案上傳跟下載，是否也意味著可以上傳後讓網頁取得檔案，進行處理後，再提供下載功能呢？可行的話，寫好的程式也可以分享出去，畢竟公司內電腦總不會限制不給裝瀏覽器吧？
動手試試
基本版型
打開vscode，新建一個html檔案，鍵入!快速建立版型。
在body區塊內加入input標籤，並且type="file"。
用瀏覽器打開index.html確認結果，點擊選擇檔案會叫出檔案總管，可以選擇要上傳的檔案。
展示
為了方便使用，加入一個點擊按鈕及一個展示區塊，並且給定展示區塊呈現大小。
<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>
程式邏輯
- 習慣上我會把
script標籤放在head區塊，在document加入事件監聽器，確保DOM載入完成後才觸發執行main。 - 腳本語言通常不會有主要的程式進入點，因此我還是會加入一個
main function。
由於main function只會執行一次，不會進行複用，也可以inline進去上方監聽的程式中，改以匿名函式或ES6的箭頭函式的寫法，只是我個人不喜歡很多層的巢狀。 - 在
main中，選取顯示的按鈕並加入監聽click事件，事件觸發handleDisplay。 - 顯示按鈕點擊觸發後，使用瀏覽器的
File api讀取上傳檔案，並將檔案內容以文字進行讀取。 - 讀取完成拿到檔案內容，將內容更新到顯示區塊中。
<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>
- 最後把結果丟給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為例，點擊顯示後，內容顯示在下方文字區塊內。
結語
總結一下，上述內容做到的僅有讀取本機上的檔案，將讀到的內容顯示在網頁上，內容即為fileContent。
至於資料可以自行使用javascript語法對fileContent做調整，例如處理csv檔案，可透過split處理\r\n拿到每一行，再對,分割取得每一項參數資料值，整理好資料再展示到畫面上。
12會員
62內容數
遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現，文件更新往往跟不上新需求的更迭，犯錯的歷史總是不斷重演。因此，我改變了方式，蒐集從程式上、系統上的每一次異常處理過程，好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本，期待日後不管在工作上或交流上遇到難題，都能輕鬆地應答：有什麼難的，我都踩過。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
微軟的EXCEL又出了一個新函數了【TRANSLATE】，TRANSLATE這個單字翻譯成中文就是翻譯的意思，他的功能就是"翻譯"。
有了這個函數就可以直接在原有資料進行翻譯，不用再把資料丟到Google翻譯或是GPT了。
🔎函數說明
TRANSLATE(要翻譯的內容,原始語言,翻
只要會用鍵盤的人，人人都會做EXCEL表格。但是，如果你仔細研究，你或許會發現，工作是否有效率其實可以從一張EXCEL表裡看出來。這篇文章分享幾幾簡單的檢查方法與製作技巧。
在工作中常常會需要用到Excel去整理數據資料，因為近期有在進行作業優化學習，提供網路上10個常用的Excel快捷鍵配置，以及相對應的功能，做為自我複習資料。
本法省去開啟EXCEL檔，轉存為CSV檔之手動作業，縮短作業時間，提高工作效率，尤其是對象為複數個檔案場合
這篇文章介紹如何使用VBA程式碼將【包含備註】的Excel檔案轉換為PDF檔。在研究這個問題時，作者花了3個小時多的時間，但後來發現了一個更簡單的方法，這讓作者感到震驚和懷疑人生。最後，作者強調使用他人的智慧來提高自己的能力。文章提供了相關參考文獻和圖片。
🎗️本次主題成果展示:人力資訊分析
上集回顧
🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗
🔗E
🎗️本次主題成果展示:人力資訊分析
上集回顧
🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗
在工作職場上輸入資料時，如果輸入的內容可以觀察出特定的規則時，其實可以使用儲存格格式來快速輸入資料。
舉一個例子，再輸入學生班級時，三年二班要輸入4個字，【三】、【年】、【二】、【班】，但其實觀察一下規律，其中的年跟班都是相同的，那麼就能利用這個規則來偷吃步拉
📌設定儲存格格式
選取範圍
在職場上，我們經常需要使用Excel來處理資料，而條碼則是一種常見的資料識別方式，可以用來標示產品、貨物、文件等。如果可以快速製作出條碼，就可以節省不少時間，讓工作更有效率。本篇文章將教你如何在Excel中快速製作條碼，只要3個步驟，就可以輕鬆完成。
在職場上，我們經常需要使用 Excel 表格來處理資料，而自動格式設定可以幫助我們快速將資料整理成一致的格式，讓資料看起來更清晰、更有效率。用 Excel 的快捷鍵自動出現自動格式設定技巧，可以讓我們在更短的時間內套用自動格式，讓工作更輕鬆。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
微軟的EXCEL又出了一個新函數了【TRANSLATE】，TRANSLATE這個單字翻譯成中文就是翻譯的意思，他的功能就是"翻譯"。
有了這個函數就可以直接在原有資料進行翻譯，不用再把資料丟到Google翻譯或是GPT了。
🔎函數說明
TRANSLATE(要翻譯的內容,原始語言,翻
只要會用鍵盤的人，人人都會做EXCEL表格。但是，如果你仔細研究，你或許會發現，工作是否有效率其實可以從一張EXCEL表裡看出來。這篇文章分享幾幾簡單的檢查方法與製作技巧。
在工作中常常會需要用到Excel去整理數據資料，因為近期有在進行作業優化學習，提供網路上10個常用的Excel快捷鍵配置，以及相對應的功能，做為自我複習資料。
本法省去開啟EXCEL檔，轉存為CSV檔之手動作業，縮短作業時間，提高工作效率，尤其是對象為複數個檔案場合
這篇文章介紹如何使用VBA程式碼將【包含備註】的Excel檔案轉換為PDF檔。在研究這個問題時，作者花了3個小時多的時間，但後來發現了一個更簡單的方法，這讓作者感到震驚和懷疑人生。最後，作者強調使用他人的智慧來提高自己的能力。文章提供了相關參考文獻和圖片。
🎗️本次主題成果展示:人力資訊分析
上集回顧
🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗
🔗E
🎗️本次主題成果展示:人力資訊分析
上集回顧
🔗EXCEL儀表板 | 人力資訊分析儀表板 #1 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #2 | 上手等級:入門🔗
🔗EXCEL儀表板 | 人力資訊分析儀表板 #3 | 上手等級:入門🔗
在工作職場上輸入資料時，如果輸入的內容可以觀察出特定的規則時，其實可以使用儲存格格式來快速輸入資料。
舉一個例子，再輸入學生班級時，三年二班要輸入4個字，【三】、【年】、【二】、【班】，但其實觀察一下規律，其中的年跟班都是相同的，那麼就能利用這個規則來偷吃步拉
📌設定儲存格格式
選取範圍
在職場上，我們經常需要使用Excel來處理資料，而條碼則是一種常見的資料識別方式，可以用來標示產品、貨物、文件等。如果可以快速製作出條碼，就可以節省不少時間，讓工作更有效率。本篇文章將教你如何在Excel中快速製作條碼，只要3個步驟，就可以輕鬆完成。
在職場上，我們經常需要使用 Excel 表格來處理資料，而自動格式設定可以幫助我們快速將資料整理成一致的格式，讓資料看起來更清晰、更有效率。用 Excel 的快捷鍵自動出現自動格式設定技巧，可以讓我們在更短的時間內套用自動格式，讓工作更輕鬆。