要件:
Excel ファイルをアップロードし、js を通じてそれを json 形式のデータに解析します。
取得した Excel データを操作し、生成された目的のファイルに結合してダウンロードします。
1.xlsxプラグインをインストールする
cnpm install xlsx
Excel ファイルを解析するための xlsx プラグイン
2. 新しい xlsx.js ファイルを作成し、次のコードを追加して、plugins または utils plugin フォルダーに置きます。
/* 读取文件 */
export const readFile = (file) => {
return new Promise(resolve => {
let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = ev => {
resolve(ev.target.result)
}
})
}
3. vue3 プロジェクトで開発されたページ コードは、
index.html にダウンロードされたファイルの js コードを導入します。
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></scrip
以下はページの完全なコードです。関数は vue3 に基づいて実装されています。
<template>
<div style="text-align:left;padding-left:30px;position:relative;z-index:1">
<el-upload name="file"
:multiple="false"
:show-file-list="false"
:auto-upload="false"
:on-change="handleChange"
style="margin-bottom:30px">
<el-button type="primary">上传excel文件</el-button>
</el-upload>
</div>
</template>
<script >
import {
defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
import * as XLSX from 'xlsx'
import {
readFile } from './xlsx'
export default defineComponent({
setup(props, context) {
const {
proxy } = getCurrentInstance()
const data = reactive({
excelData: null
})
const handleChange = async (file, fileList) => {
let dataBinary = await readFile(file.raw)
let workBook = XLSX.read(dataBinary, {
type: 'binary', cellDates: true })
let workSheet = workBook.Sheets[workBook.SheetNames[0]]
let data = XLSX.utils.sheet_to_json(workSheet)
console.log('读取到的excel的内容',data)
data.forEach((row) => {
console.log('对数据进行操作')
})
var jsonFile = JSON.stringify(data)
var blob = new Blob([jsonFile], {
type: 'text/plain;charset=utf-8'
})
saveAs(blob, 'excel生成的.json')
}
}
return {
...toRefs(data),
handleChange
}
}
})
</script>