フロントエンドは xlsx プラグインを使用して Excel ファイルデータを読み取ります (ナニーレベルのチュートリアル)

私はインターンの新人です、よく読んでください......

開発プロセスでは、Excel ファイルの内容を解析してオブジェクト形式で表示したり、オブジェクトに接続したりするために、フロントエンドを使用して Excel ファイルを処理する必要が避けられません。バックエンド。

機能実現アイデア：

ファイル選択 => FileReader オブジェクトがバイナリデータを取得 => XLSX がバイナリデータを処理 => データを取得

1. ボタンのスタイルとイベントをインポートします (要素 ui)

まず第一に、必要なのはインポートボタンですが、インポートボタンは選択ファイル (ファイル) をトリガーする変更イベントを処理するのが簡単ではないため、位置決めを使用してこの問題を解決できます。原理は次のとおりです。通常のボタンの上にボタン（ファイル）を重ねて表示します。次に、ファイル選択ボタン（ファイル）の透明度を0に変更します。

<el-button size="mini" type="success" style="margin-top: 10px" :disabled="disabled" 
class="el-dialog-position">
    <span v-if="importStatus === false">
        导入<i class="el-icon-upload el-icon--right" />
        <input ref="files" type="file" v-if="!disabled" class="excelFile" @change="excelFileMethod" />
    </span>
    <span v-if="importStatus === true">
        导入中<i class="el-icon-loading el-icon--right" />
    </span>
</el-button>

次はchnageイベントです。このイベントは、input、select、および textarea 要素で、ユーザーがchange これらの要素の値を変更したときに発生します。入力イベントとは異なり、イベントは要素が変更されるたびに value トリガーされるわけではありませんchange 。ファイルを選択して確認すると、以下のような大きなデータの山が得られました。

この大量のデータは気にしません。後で使用する必要があるため、ターゲットオブジェクト内のファイルオブジェクトに注目します。ただし、ここでの情報はファイルの情報のみであり、データではないことに注意してください。バイナリファイルだけです！！！！！！

2. 取得したファイル情報を加工（fileReader使用）

まずfileReader について紹介します。FileReader このオブジェクトを使用すると、Web アプリケーションはユーザーのコンピュータに保存されているファイル (または生データバッファ) の内容を非同期的に読み取り、 Fileオブジェクトまたは Blob オブジェクトを使用して、読み取るファイルまたはデータを指定できます。(原文は公式サイトにあります)ここでは、属性とメソッドの使用方法をご自身で確認するためのアドレスを提供します。あまり多くは紹介しません...まずコードを見てみましょう。

// change事件
excelFileMethod(e) {
    var _this = this
	//  excel文件信息
	const files = e.target.files
	console.log(files);
	// 构建fileReader对象
	const fileReader = new FileReader()
	// 读取操作完成时
	fileReader.onload = function(e) {
		try {
			// 二进制数据
			console.log(e.target.result)
			
		} catch (e) {
			console.log('文件类型不正确')
			return
		}
	}
	// 读取指定文件内容
	fileReader.readAsBinaryString(files[0])
}

新しい FileReader オブジェクトを構築するために必要な最初のステップ

2 番目のステップでは、 FileReader.readAsBinaryString() を使用して、指定されたBlob内のコンテンツを読み取ります。完了すると、resultプロパティには、読み取られたファイルの生のバイナリデータが含まれます。

3 番目のステップは FileReader.onLoad で、読み取り操作が完了するとトリガーされます。

3. 取得したバイナリデータを加工（XLSXプラグイン使用）

XLSX プラグインを使用するには、使用する前にダウンロードし、CND で使用する必要があります。個人的なニーズを確認するために npm によってインストールすることもできます。私は vue プロジェクトのためにここにいるので、npm によってインストールされます。 XLSXを導入する必要がありますが、その方法は以下の通りです。

「xlsx」からXLSXをインポートします

上記のコードを通じてバイナリデータを取得しました。バイナリデータの解析を開始しましょう。実装にはXLSX.read(data, { type: type})メソッドを使用します。typeの主な値は次のとおりです。

Base64: Base64で読み取る

バイナリ：BinaryString格式（バイトnはdata.charCodeAt(n)）

文字列: UTF8 でエンコードされた文字列

バッファ：nodejsバッファ

配列: Uint8Array、8 ビット符号なし配列

file: ファイルのパス (nodejs でのみサポートされます)

このメソッドは、次のような内容のworkBookオブジェクトを返します。

workBook オブジェクトが表示され、sheetNames はすべてのシート名を保存し、Sheets は各シートの特定のコンテンツ (これを Sheet オブジェクトと呼びます) を保存します。各シートは、A1このようなキー値を介して各セルの内容を保存します。これをセルオブジェクト (セルオブジェクト) と呼びます。

workBookオブジェクトを解析するメソッド

XLSX.utils.sheet_to_csv : CSV形式を生成します

XLSX.utils.sheet_to_txt : プレーンテキスト形式を生成します

XLSX.utils.sheet_to_html : HTML形式を生成します

XLSX.utils.sheet_to_json : JSON 形式で出力

ここでは XLSX.utils.sheet_to_json を使用しますので、その紹介に焦点を当てます。XLSX.utils.sheet_to_json(data, type) には 2 つのパラメータがあります。1 つ目は、wordBook オブジェクトの Sheets オブジェクトに対応するデータです。2 つ目のパラメータは次のとおりです。次のように構成されています。

raw: 生の値 (true) またはフォーマットされた文字列 (false) を使用します (デフォルト: true )

dateNF:文字列出力で指定された日付形式を使用します (デフォルト: FMT 14 )

defval: null または未定義 () の代わりに指定された値を使用します。

blankrows: 出力に空白行**を含めます (デフォルト: ** )

範囲：

        (数値) ワークシート範囲を使用しますが、開始行を値に設定します

        (文字列) 指定された範囲を使用します (A1 スタイルの境界範囲文字列)

        (デフォルト) ワークシート範囲を使用します (worksheet['!ref'])

ヘッダ：

        1: 配列の配列 (「2 次元配列」) を生成します。

"A".Row オブジェクトのキーはリテラルの列ラベルです

        文字列の配列: 指定された文字列を行オブジェクトのキーとして使用します。

        (デフォルト): 最初の行をキーとして読み取り、曖昧さを解消します。

以下は、Excel ファイルをインポートしてデータを読み取るコード処理全体であり、取得したデータをパラメーターとして使用してバックエンドインターフェイスに接続できます。

// 处理excel文件
excelFileMethod(e) {
    // 导入状态和文件信息
    var _this = this
    _this.importStatus = true
    const excelFile = e.target.files
    // 构建fileReader对象
    const fileReader = new FileReader()
    // 该事件为读取完成时触发
    fileReader.onload = function (ev) {
      try {
        const data = ev.target.result
        const workbook = XLSX.read(data, {type: 'binary'})
        const list = ''
        const listNew = list.concat(XLSX.utils.sheet_to_json(workbook.Sheets['sheets1'], {header: 1}))
        _this.excelData.list = listNew.slice(6).split(',')
        // 得到的数据发送axios请求
        importExcel(_this.excelData).then(res => {
          console.log(res)
          _this.importStatus = false
          if (res.code === 200) {
            _this.$alert(res.data.msg, '导入成功', {
              confirmButtonText: '确定',
              callback: () => {
                // 确认后做什么
              }
            })
          } else {
            _this.$alert(res.data.msg, '导入失败', {
              confirmButtonText: '确定',
              callback: () => {
                // 确认后做什么
              }
            })
          }
        })
      } catch (e) {
        _this.$message({message: '文件类型不正确', type: 'warning'})
      }
    }
    // 读取数据
    fileReader.readAsBinaryString(excelFile[0])
}

今後も技術的な問題を更新していきますので、興味のあるお友達は注目していただくか、私にプライベートメッセージを送ってください。！！