Vue: Excel表格内容如何用 JS 进行输出

猿友 2021-01-07 17:35:46 浏览数 (2703)

反馈

将Excel表格的内容用js进行输出

问题：

在vue项目中使用js获取Excel表格里面的数据

解决方法：

第一步：下载插件

cnpm i xlsx

第二步：新建一个js文件，将方法进行写入，并导出

import XLSX from 'xlsx'
function get_header_row (sheet) {
    const headers = []
    const range = XLSX.utils.decode_range(sheet['!ref'])
    let C
    const R = range.s.r /* start in the first row */
    for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
    }
    return headers
}
const read = (data, type) => {
    const workbook = XLSX.read(data, { type: type })
    const firstSheetName = workbook.SheetNames[0]
    const worksheet = workbook.Sheets[firstSheetName]
    const header = get_header_row(worksheet)
    const results = XLSX.utils.sheet_to_csv(worksheet)
    return { header, results }
}
export { read }

第三步：在项目里使用，获取到表格里的数据

<template>
    <div>
        <el-button class="exportExcel"
                   @click="exportExcel">导入</el-button>
        <input type="file"
               ref="keyWordData"
               @change='handleBeforeUpload'>
    </div>
</template>
<script>
import { read } from '@/utils/excel'
export default {
    data () {
        return {
            allData: [],
        }
    },
    methods: {
        exportExcel () {
            this.$refs['keyWordData'].click()
        },
        handleBeforeUpload (event) {
            let file = event.target.files[0]
            const reader = new FileReader()
            reader.readAsArrayBuffer(file)
            reader.onload = e => {
                const data = e.target.result
                const { results } = read(data, 'array')
                if (results) {
                    let arr = this.$CommUtils.deepClone(results.split('\n'))
                    arr = arr.filter(item => {
                        return item
                    })
                    this.keyWordData = arr
                    console.log(arr)
                }
            }
        },
    },
}
</script>

arr是一个数组，每个元素是一个字符串，是用逗号分隔的，如果想得到其中的某个点，需要使用split进行切割成数组，然后再新建一个空数组，把需要的数据来进行push。