JS は Excel のインポートと Excel へのテーブルのエクスポートを実装します。

プロジェクトの開発過程で、Excel ファイルをインポートして分析し、ページ上でレンダリングするという要件に遭遇しました。ユーザーはフォーム内のコンテンツの一部を変更して、サーバーにアップロードできます。

Excelのインポート

1. html を使用して、ファイルをローカルに取得するためのアップロードタグをサポートします (type file、el-upload などによる入力など)。

2. FileReader をインスタンス化し、readAsBinaryString を通じてファイルをバイナリ文字列として読み取ります。(FileReader が提供する他のメソッドについては、JavaScript_javascript skill_Script Home の FileReader サンプルの詳細な説明を参照してください)

3. XLSX プラグインの XLSX.read() メソッドを使用して、バイナリ文字列を Excel ファイルのワークブックオブジェクトワークブックに変換します (XLSX の具体的な使用方法については、概要 | SheetJS コミュニティ版を参照してください)

4. XLSX.utils.sheet_to_json() メソッドを通じて、ワークブックから最初の Sheets テーブルデータを取得し、それを JSON データに変換します。

5. json データを再編成して配列を生成します。つまり、定義した列フィールド名に従って、独自のニーズを満たす json データを再構成します。

具体的な実装コードは以下の通りです。

importFilePushTable(params) {
      const _file = params.file
      let workBook = null
      let filetype = _file.name.split('.')[_file.name.split('.').length - 1]
      let filetypes = '.xlsx,.xls'
      if (filetypes.indexOf(filetype) === -1) {
        this.$message.warning('请上传.xlsx,.xls文件。')
        return
      }
      const reader = new FileReader()
      reader.readAsBinaryString(_file)
      reader.onload = (evt) => {
        workBook = XLSX.read(evt.target.result, {
            type: 'binary'
        })
        let excelData = []
        for(let sheet in workBook.Sheets) {
            excelData = excelData.concat(XLSX.utils.sheet_to_json(workBook.Sheets[sheet]))
        }
        this.tableData = excelData.map(obj => {
            return {
                date: this.formatDate(obj['日期'], '/'),
                name: obj['姓名'],
                sex: obj['性别'],
                age: obj['年龄'],
                educational: obj['学历'],
                address: obj['地址'],
            }   
        })
      }
    },

フロントエンドからExcelをインポートする必要があるので、エクスポートを解決する方法を考えましょう。? ? ?

Excelにインポート

1. インポートの 5 番目の手順に従って、エクスポートする必要があるデータを変換します。

2. XLSX プラグインの XLSX.utils.book_new() メソッドを使用して、Excel ワークブックオブジェクトワークブックを作成します。

3. XLSX.utils.json_to_sheet() を通じて、Excel テーブルオブジェクトワークシートを作成します。

4. XLSX.utils.book_append_sheet() を通じて、実際の Excel ワークブックを生成します

5. XLSX.writeFile() を使用して Excel ファイルを生成します。

exportFile(data) {
        let exportData = JSON.parse(JSON.stringify(data)).map(obj => {
            return {
                '日期': obj.date,
                '姓名': obj.name,
                '性别': obj.sex,
                '年龄': obj.age,
                '学历': obj.educational,
                '地址': obj.address,
            }
        })
        const workBook = XLSX.utils.book_new()
        const workSheet = XLSX.utils.json_to_sheet(exportData)
        XLSX.utils.book_append_sheet(workBook, workSheet, 'sheet')
        XLSX.writeFile(workBook, '导出Excel数据.xlsx')
    },

JS は Excel のインポートと Excel へのテーブルのエクスポートを実装します。

おすすめ