js读取本地 excel文件、txt文件的内容

时间：2025-01-20 13:09:01
<input type="file" @change="fileChange">

1、txt文件

fileChange(event) {
	('fileChange', event)
	const file = [0];
	const reader = new FileReader();
	
	(file);

	 = function(e) {
		('reader', e)
						
		// 文本内容
		()

        // 切分行
		// ('\n').forEach(function(v, i){
        //     (v);
        // });
				

	};
}

2、excel文件

1）安装解析插件xlsx

npm i xlsx

2）以 array 形式读取

import * as XLSX from 'xlsx'

fileChange(event) {
	('fileChange', event)
	const file = [0];
	const reader = new FileReader();
	

	(file);

	 = function(e) {
		('reader', e)
						
		// excel文件 —— array
		const data = new Uint8Array();
		const workbook = (data, {type: 'array'});

		// 假设我们只读取第一个工作表
		const firstSheetName = [0];
		const worksheet = [firstSheetName];
		const jsonData = .sheet_to_json(worksheet);
		
		(jsonData, worksheet);
				

	};
}

3）以 binary 形式读取

import * as XLSX from 'xlsx'

fileChange(event) {
	('fileChange', event)
	const file = [0];
	const reader = new FileReader();
	

	(file);

	 = function(e) {
		('reader', e)
						
		// excel文件 —— binary
		const workbook = (, {type: 'binary'});
		const sheetNames = ; // 工作表名称集合
		const worksheet = [sheetNames[0]]; // 这里我们只读取第一张sheet
		
        // 输出字符串形式
		const csv = .sheet_to_csv(worksheet);
		(csv)

		// 输出数组形式
		const rows = ('\n'); // 转化为数组
		(); // 最后一行没用的
		(rows);  // 打印输出的数组
				

	};
}

3、vue案例

1）组件形式

一个可以解析获取本地excel文件和txt文件的按钮组件，可以自定义插槽内容

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


<parseExcelBtn @getResult="getResult" btnWidth="300px">
    <span>自定义按钮</span>
</parseExcelBtn>


getResult(e) {
	(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
	})
	(props)

	const emit = defineEmits(['getResult'])

	const fileInput = ref(null)
	const hasDefaultSlotContent = ref(false)


	const slots = useSlots();

	onMounted(() => {

		// 检查默认插槽是否有内容
		if () {
			const slotContent = ();
			if(slotContent) {
				 = true
			}
			//  = (({ vnode }) => {
			// 	(vnode)
			// 	// 检查节点是否是文本节点且不为空
			// 	return  === Text && () !== '';
			// });
		}
	})
	
	// 按钮点击
	function doClick() {
		if(fileInput) {
			()
		}
	}

	// 本地文件选择
	function fileChange(event: any) {
		('fileChange', event)
		const file = [0];
        if(!file) {
            return
        }

		let testMsg = (('.')+1)
		
		if(!['txt','xlsx', 'xls'].includes(testMsg)) {
			('不是excel文件～')
			return
		}

		const reader = new FileReader();

		if(testMsg === 'txt') {
			(file);
		} else {
			if( === 'array'){
				(file);
			} else {
				(file);
			}
		}
		

		 = function(e) {
			// ('reader', e)
			
			if(testMsg === 'txt') {
				// txt文件
				// ()
				// ('\n').forEach(function(v, i){
				//     (v);
				// });

				emit('getResult', )

			} else {
				if( === 'array') {

					// excel文件 —— array
					const data = new Uint8Array();
					const workbook = (data, {type: 'array'});
					// 假设我们只读取第一个工作表
					const firstSheetName = [0];
					const worksheet = [firstSheetName];
					const jsonData = .sheet_to_json(worksheet);
			
					// (jsonData, worksheet);
					emit('getResult', jsonData)
				} else {
					// excel文件 —— binary
					const workbook = (, {type: 'binary'});
					const sheetNames = ; // 工作表名称集合
					const worksheet = [sheetNames[0]]; // 这里我们只读取第一张sheet

					const csv = .sheet_to_csv(worksheet);

					if( === 'array') {
						// 数组形式
						const rows = ('\n'); // 转化为数组
						(); // 最后一行没用的
						// (rows);  // 打印输出的数组

						emit('getResult', rows)
					} else {
						// 字符串形式
						// (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() {
     = parseExcel({
       // resultType?: string,
       // readType?: string
    }, )
},

methods: {

    // 回调
    parseExcelCallBack(e) {
      (e)
    },

    // 导入
    handleParseExcel() {
      ()
    },
}

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

export function parseExcel(props, fn) {
	('init parseExcel function')
	const inputDom = ('input')
	 = 'file'
	 = '.txt, .xlsx, .xls'

	('change', fileChange)

	// 本地文件选择
	function fileChange(event) {
		('fileChange', event, , )
		const file = [0];

		if(!file) {
			return
		}

		let testMsg = (('.')+1)
		
		if(!['txt','xlsx', 'xls'].includes(testMsg)) {
			('不是excel文件～')
			//  = ''
			return
		}

		const reader = new FileReader();

		if(testMsg === 'txt') {
			(file);
		} else {
			if( === 'array'){
				(file);
			} else {
				(file);
			}
		}
		
		 = function(e) {
			// ('reader', e)
			
			if(testMsg === 'txt') {
				// txt文件
				// ()
				// ('\n').forEach(function(v, i){
				//     (v);
				// });

				fn()

			} else {
				if( === 'array') {

					// excel文件 —— array
					const data = new Uint8Array();
					const workbook = (data, {type: 'array'});
					// 假设我们只读取第一个工作表
					const firstSheetName = [0];
					const worksheet = [firstSheetName];
					const jsonData = .sheet_to_json(worksheet);
			
					// (jsonData, worksheet);
					fn(jsonData)
					
				} else {
					// excel文件 —— binary
					const workbook = (, {type: 'binary'});
					const sheetNames = ; // 工作表名称集合
					const worksheet = [sheetNames[0]]; // 这里我们只读取第一张sheet

					const csv = .sheet_to_csv(worksheet);

					if( === 'array') {
						// 数组形式
						const rows = ('\n'); // 转化为数组
						(); // 最后一行没用的
						// (rows);  // 打印输出的数组

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

			 = ''
			
		}

		 = function(e) {
			(e)
			(e)
			 = ''
		}

	}

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

相关文章