今天小编给大家分享一下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 for (C = range.s.c; C <= range.e.c; ++C) { var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] 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表格内容”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
