Vue中怎么用JS输出Excel表格内容

今天小编给大家分享一下Vue中怎么用JS输出Excel表格内容的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

问题：

在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。

以上就是“Vue中怎么用JS输出Excel表格内容”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。