JavaScript如何讀取本地excel文件、txt文件的內容

更新時間：2024年06月21日 09:42:24 作者：不怕麻煩的鹿丸

JavaScript是一種腳本語言,廣泛應用于前端開發(fā),這篇文章主要給大家介紹了關于JavaScript如何讀取本地excel文件、txt文件的內容,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1、txt文件

fileChange(event) {
	console.log('fileChange', event)
	const file = event.target.files[0];
	const reader = new FileReader();
	
	reader.readAsText(file);

	reader.onload = function(e) {
		console.log('reader', e)
						
		// 文本內容
		console.error(reader.result)

        // 切分行
		// reader.result.split('\n').forEach(function(v, i){
        //     console.log(v);
        // });
	};
}

2、excel文件

1）安裝解析插件xlsx

npm i xlsx

2）以 array 形式讀取

import * as XLSX from 'xlsx'

fileChange(event) {
	console.log('fileChange', event)
	const file = event.target.files[0];
	const reader = new FileReader();

	reader.readAsArrayBuffer(file);

	reader.onload = function(e) {
		console.log('reader', e)
						
		// excel文件 —— array
		const data = new Uint8Array(e.target.result);
		const workbook = XLSX.read(data, {type: 'array'});

		// 假設我們只讀取第一個工作表
		const firstSheetName = workbook.SheetNames[0];
		const worksheet = workbook.Sheets[firstSheetName];
		const jsonData = XLSX.utils.sheet_to_json(worksheet);
		
		console.log(jsonData, worksheet);
	};
}

3）以 binary 形式讀取

import * as XLSX from 'xlsx'

fileChange(event) {
	console.log('fileChange', event)
	const file = event.target.files[0];
	const reader = new FileReader();

	reader.readAsArrayBuffer(file);

	reader.onload = function(e) {
		console.log('reader', e)
						
		// excel文件 —— binary
		const workbook = XLSX.read(e.target.result, {type: 'binary'});
		const sheetNames = workbook.SheetNames; // 工作表名稱集合
		const worksheet = workbook.Sheets[sheetNames[0]]; // 這里我們只讀取第一張sheet
		
        // 輸出字符串形式
		const csv = XLSX.utils.sheet_to_csv(worksheet);
		console.log(csv)

		// 輸出數組形式
		const rows = csv.split('\n'); // 轉化為數組
		rows.pop(); // 最后一行沒用的
		console.log(rows);  // 打印輸出的數組
	};
}

3、vue案例

1）組件形式

一個可以解析獲取本地excel文件和txt文件的按鈕組件，可以自定義插槽內容

<parseExcelBtn @getResult="getResult"></parseExcelBtn>

<parseExcelBtn @getResult="getResult" btnWidth="300px">
    <span>自定義按鈕</span>
</parseExcelBtn>

getResult(e) {
	console.log(e)
},

<template>
	<div class="parse-excel-btn" 
		:style="{
			width: btnWidth
		}" 
		@click="doClick">
			<slot v-if="hasDefaultSlotContent"></slot>
			<div v-else class="txt">{{ btnTxt }}</div>
			<input type="file" hidden accept=".txt, .xlsx, .xls" ref="fileInput" @change="fileChange">
	</div>
</template>
<script lang="ts" setup>
	import { ref, withDefaults, defineProps, defineEmits, watch, useSlots, onMounted } from 'vue'
	import * as XLSX from 'xlsx' 
	import { Message } from 'view-ui-plus'
	interface Props {
		btnTxt?: string, // 按鈕文本
		btnWidth?: string // 按鈕寬度
		resultType?: string // 輸出結果類型
		readType?: string // 讀取類型
	}
	const props = withDefaults(defineProps<Props>(), {
		btnTxt: '導入excel',
		btnWidth: 'auto',
		resultType: 'string', // array string
		readType: 'binary' // array binary
	})
	console.log(props)
	const emit = defineEmits(['getResult'])
	const fileInput = ref(null)
	const hasDefaultSlotContent = ref(false)
	const slots = useSlots();
	onMounted(() => {
		// 檢查默認插槽是否有內容
		if (slots.default) {
			const slotContent = slots.default();
			if(slotContent) {
				hasDefaultSlotContent.value = true
			}
			// hasDefaultSlotContent.value = slotContent.some(({ vnode }) => {
			// 	console.log(vnode)
			// 	// 檢查節(jié)點是否是文本節(jié)點且不為空
			// 	return vnode.type === Text && vnode.children.trim() !== '';
			// });
		}
	})
	// 按鈕點擊
	function doClick() {
		if(fileInput) {
			fileInput.value.click()
		}
	}
	// 本地文件選擇
	function fileChange(event: any) {
		console.log('fileChange', event)
		const file = event.target.files[0];
        if(!file) {
            return
        }
		let testMsg = file.name.substring(file.name.lastIndexOf('.')+1)
		if(!['txt','xlsx', 'xls'].includes(testMsg)) {
			Message.error('不是excel文件～')
			return
		}
		const reader = new FileReader();
		if(testMsg === 'txt') {
			reader.readAsText(file);
		} else {
			if(props.readType === 'array'){
				reader.readAsArrayBuffer(file);
			} else {
				reader.readAsBinaryString(file);
			}
		}
		reader.onload = function(e) {
			// console.log('reader', e)
			if(testMsg === 'txt') {
				// txt文件
				// console.error(reader.result)
				// reader.result.split('\n').forEach(function(v, i){
				//     console.log(v);
				// });
				emit('getResult', reader.result)
			} else {
				if(props.readType === 'array') {
					// excel文件 —— array
					const data = new Uint8Array(e.target.result);
					const workbook = XLSX.read(data, {type: 'array'});
					// 假設我們只讀取第一個工作表
					const firstSheetName = workbook.SheetNames[0];
					const worksheet = workbook.Sheets[firstSheetName];
					const jsonData = XLSX.utils.sheet_to_json(worksheet);
					// console.log(jsonData, worksheet);
					emit('getResult', jsonData)
				} else {
					// excel文件 —— binary
					const workbook = XLSX.read(e.target.result, {type: 'binary'});
					const sheetNames = workbook.SheetNames; // 工作表名稱集合
					const worksheet = workbook.Sheets[sheetNames[0]]; // 這里我們只讀取第一張sheet
					const csv = XLSX.utils.sheet_to_csv(worksheet);
					if(props.resultType === 'array') {
						// 數組形式
						const rows = csv.split('\n'); // 轉化為數組
						rows.pop(); // 最后一行沒用的
						// console.log(rows);  // 打印輸出的數組
						emit('getResult', rows)
					} else {
						// 字符串形式
						// console.log(csv)
						emit('getResult', csv)
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.parse-excel-btn {
		cursor: pointer;
		.txt {
			line-height:40px;
			background:#ebf2ff;
			border-radius:6px;
			text-align: center;
			font-weight:500;
			color:#0055ff;
			font-size:16px;
		}
	}
</style>

2）函數調用形式

<button @click="handleParseExcel">excel</button>
mounted() {
    this.doParseExcel = parseExcel({
       // resultType?: string,
       // readType?: string
    }, this.parseExcelCallBack)
},
methods: {
    // 回調
    parseExcelCallBack(e) {
      console.log(e)
    },
    // 導入
    handleParseExcel() {
      this.doParseExcel()
    },
}

import * as XLSX from 'xlsx' 
import { Message } from 'view-ui-plus'

export function parseExcel(props, fn) {
	console.log('init parseExcel function')
	const inputDom = document.createElement('input')
	inputDom.type = 'file'
	inputDom.accept = '.txt, .xlsx, .xls'

	inputDom.addEventListener('change', fileChange)

	// 本地文件選擇
	function fileChange(event) {
		console.log('fileChange', event, event.target, event.target.value)
		const file = event.target.files[0];

		if(!file) {
			return
		}

		let testMsg = file.name.substring(file.name.lastIndexOf('.')+1)
		
		if(!['txt','xlsx', 'xls'].includes(testMsg)) {
			Message.error('不是excel文件～')
			// event.target.value = ''
			return
		}

		const reader = new FileReader();

		if(testMsg === 'txt') {
			reader.readAsText(file);
		} else {
			if(props.readType === 'array'){
				reader.readAsArrayBuffer(file);
			} else {
				reader.readAsBinaryString(file);
			}
		}
		
		reader.onload = function(e) {
			// console.log('reader', e)
			
			if(testMsg === 'txt') {
				// txt文件
				// console.error(reader.result)
				// reader.result.split('\n').forEach(function(v, i){
				//     console.log(v);
				// });

				fn(reader.result)

			} else {
				if(props.readType === 'array') {

					// excel文件 —— array
					const data = new Uint8Array(e.target.result);
					const workbook = XLSX.read(data, {type: 'array'});
					// 假設我們只讀取第一個工作表
					const firstSheetName = workbook.SheetNames[0];
					const worksheet = workbook.Sheets[firstSheetName];
					const jsonData = XLSX.utils.sheet_to_json(worksheet);
			
					// console.log(jsonData, worksheet);
					fn(jsonData)
					
				} else {
					// excel文件 —— binary
					const workbook = XLSX.read(e.target.result, {type: 'binary'});
					const sheetNames = workbook.SheetNames; // 工作表名稱集合
					const worksheet = workbook.Sheets[sheetNames[0]]; // 這里我們只讀取第一張sheet

					const csv = XLSX.utils.sheet_to_csv(worksheet);

					if(props.resultType === 'array') {
						// 數組形式
						const rows = csv.split('\n'); // 轉化為數組
						rows.pop(); // 最后一行沒用的
						// console.log(rows);  // 打印輸出的數組

						fn(rows)
					} else {
						// 字符串形式
						// console.log(csv)
						fn(csv)
					}	
				}	
			}	

			inputDom.value = ''
		}

		reader.onerror = function(e) {
			Message.error(e)
			console.log(e)
			inputDom.value = ''
		}
	}

	return () => {
		if(inputDom) {
			inputDom.click()
		}
	}
}

總結

到此這篇關于JavaScript如何讀取本地excel文件、txt文件內容的文章就介紹到這了,更多相關js讀取本地文件內容內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript如何攔截全局Fetch的請求與響應詳解
全局的fetch()方法用于發(fā)起獲取資源的請求,它返回一個promise,這個promise會在請求響應后被resolve,并傳回Response對象,這篇文章主要給大家介紹了關于JavaScript如何攔截全局Fetch的請求與響應的相關資料,需要的朋友可以參考下
2024-04-04
用javascript獲取textarea中的光標位置
Javascript一向以他的靈活隨意而著稱，這也使得它的功能可以非常的強大，而由于沒有比較好的調試工具，又使得它使用起來困難重重，尤其使對于一些初學者，更是感覺到無從下手。今天探討的問題是用javascript獲取textarea中光標的位置。
2008-05-05
JavaScript中5種調用函數的方法
這篇文章主要介紹了JavaScript中5種調用函數的方法,本文詳細的介紹了Javascript中各種函數調用的方法及其原理,對于理解JavaScript的函數有很大的幫助,需要的朋友可以參考下
2015-03-03
for?of?和?for?in?的區(qū)別介紹
這篇文章主要介紹了for?of?和?for?in?的區(qū)別,for?of?和?for?in都是用來遍歷的屬性，本文重點介紹下for?of?和?for?in?的區(qū)別，需要的朋友可以參考下
2022-12-12
JavaScript實現刷新不重記的倒計時
網上關于JavaScript實現倒計時的文章有很多，但是一般都是刷新后會重新開始計時，可是我們有的時候會需要刷新卻不重新計算的倒計時，這該怎么做呢？下面我們一起來看看這種倒計時怎么實現吧。
2016-08-08
JavaScript實現創(chuàng)建自定義對象的常用方式總結
這篇文章主要介紹了JavaScript實現創(chuàng)建自定義對象的常用方式,結合實例形式總結分析了JavaScript工廠模式、構造函數模式、原型模式、組合模式等常用的自定義對象創(chuàng)建模式操作與使用技巧,需要的朋友可以參考下
2018-07-07
javaScript實現鼠標在文字上懸浮時彈出懸浮層效果
這篇文章主要為大家詳細介紹了javaScript實現鼠標在文字上懸浮時彈出懸浮層效果的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-03-03
javascript 控制超級鏈接的樣式代碼
javascript 控制超級鏈接的樣式代碼...
2007-08-08
關于js中window.location.href,location.href,parent.location.href
關于js中window.location.href,location.href,parent.location.href,top.location.href的用法
2010-10-10
JavaScript事件冒泡與事件捕獲實例分析
這篇文章主要介紹了JavaScript事件冒泡與事件捕獲,結合實例形式分析了事件冒泡、阻止冒泡以及事件捕獲的相關原理、操作技巧與注意事項,需要的朋友可以參考下
2018-08-08