VUE+ElementUIブラウザローカルインポート解析Excel(サーバにアップロードしない)

VUE+ElementUIブラウザは解析Excelをローカルにインポートします(サーバにアップロードしません).
サードパーティ製xlsxライブラリ(バージョン:0.14.*)を導入する必要があります.npmは次のコマンドを実行します.

npm i xlsx@^0.14.1 -s

サンプルコード:

	import XLSX from 'xlsx';  // npm   ，  ：npm i xlsx@^0.14.1 -s

	export default {
		name: 'importExcel',
		data() {
			return {
				files: null //    
			};
		},
		methods: {
			/**
			 * input-file      ，    "$event"
			 * @param e {@link Object}：$event    ；
			 */
			inFile(e) {
				this.files = (e.target || e.srcElement).files;  //  "input-file" FileList  
				if (!this.files || !this.files.length)
					return;
				for (let i = 0, len = this.files.length; i < len; i++)
					this.read(this.files[i]);
			},
			/**
			 *           ，    、               。
			 * @param f {@link Object}：       ；
			 * @param fs {@link Array}：      ；
			 */
			elInFile(f, fs) {
				this.read(f.raw);
			},
			/**
			 *   
			 * @param f {@link File}
			 */
			read(f) {
				let rd = new FileReader();
				rd.onload = e => {  //this.readAsArrayBuffer   ，   this.onload  。       
					let sheets = rd.read2JS();
					for (let name in sheets)
						console.log(name + '      ：', sheets[name]);
					['formulae', 'html', 'txt', 'csv', 'dif', 'slk', 'eth'].forEach(item => {
						console.info('\r
   ：' + item);
						let sheets = rd.read2(item);
						for (let name in sheets)
							console.log(name + '      ：', sheets[name]);
					});
				};
				rd.readAsBinaryString(f);
			}
		},
		beforeCreate() {
			/**
			 *   Excel  ，  {@link Object}  （     ）
			 * @return {@link Object}：workbook，      ；
			 */
			FileReader.prototype.read2workbook = function () {
				let redABS = false;   //              
				let bytes = new Uint8Array(this.result);  //       
				if (redABS) {
					// let fix = new TextDecoder(encode || 'UTF-8').decode(bytes);
					let fix = fixdata(bytes);
					let b2a = btoa(fix);    //js    ：     base64  。   atob(base64)  ， base64   
					var wb = XLSX.read(b2a, {
						type: 'base64'
					});
				} else {
					let len = bytes.byteLength;
					let binarys = new Array(len); //      ，    
					for (let i = 0; i < len; i++)
						binarys[i] = String.fromCharCode(bytes[i]);
					let binary = binarys.join('');
					var wb = XLSX.read(binary, {
						type: 'binary'
					});
				}
				return wb;  //workbook
			};
			/**
			 *    ...  
			 */
			FileReader.prototype.read2 = function (format = 'json') {
				let wb = this.read2workbook();
				if (!wb)
					return null;

				let r = {};
				let formats = ['json', 'formulae', 'html', 'txt', 'csv', 'dif', 'slk', 'eth'];  //       
				format = formats.indexOf(format) == -1 ? 'json' : format;
				wb.SheetNames.forEach(name => {     //       
					r[name] = XLSX.utils['sheet_to_' + format](wb.Sheets[name]);
				});
				return r;
			};
			/**
			 *    JSON
			 * @description:      ，XLSX            ，  sheet     Key。
			 *  Excel               ，       。
			 */
			FileReader.prototype.read2JS = function () {
				return this.read2();
			};
			/*   readAsBinaryString   */
			FileReader.prototype.readAsBinaryString = function (f) {
				if (!this.onload)       //  this   onload  ，           
					this.onload = e => {  // this.onload   ，      
						let rs = this.read2workbook();
						console.log(rs);
					};
				this.readAsArrayBuffer(f);  //     this.onload  
			};

			/**
			 * char  String
			 * @param data {@link Array}：char ；
			 * @return {@link String}
			 */
			function fixdata(data) {
				let w = 1024 << 10; //    1M  
				let len = Math.floor(data.byteLength / w);
				let o = new Array(len);
				for (var i = 0; i < len; i++)
					o[i] = String.fromCharCode.apply(null, new Uint8Array(data.slice(i * w, (i + 1) * w)));
				o[i] = String.fromCharCode.apply(null, new Uint8Array(data.slice(i * w)));
				return o.join('');
			}
		}
	}

注意:readAsBinaryString関数のthisを書き換えます.onload共通処理方法はmethodsのread関数で再上書きされる.
JavaScriptページ方式
XLSXダウンロードアドレス:https://www.bootcdn.cn/xlsx/

	
		
		
		
		
		
		
	
	
		
	



	function inFile() {
		var e = window.event;
		var fs = (e.target || e.srcElement).files;  //  "input-file" FileList  
		if (!fs || !fs.length)
			return;
		for (var i = 0, len = fs.length; i < len; i++)
			read(fs[i]);
	}
	/**
	 *   
	 * @param f {@link File}
	 */
	function read(f) {
		/*       VUE method.read         */
	}

	void function () {
		/*       VUE    beforeCreate       */
	}();