vue项目中引入.xlsx文件

安装3个依赖包

$ npm install -S file-saver
$ npm install -S xlsx
$ npm install -D script-loader

template部分

     <template><div><inputref="excel-upload-input"class="excel-upload-input"type="file"accept=".xlsx, .xls"@change="handleClick"/><divclass="drop"@drop="handleDrop"@dragover="handleDragover"@dragenter="handleDragover">拖拽上传文件<el-button:loading="loading"style="margin-left:16px;"size="mini"type="primary"@click="handleUpload">点击上传</el-button></div><el-table:data="tableData"borderhighlight-current-rowstyle="width: 100%;margin-top:20px;"><el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" /></el-table></div></template>

js部分

<script>
import Vue from 'vue'
import XLSX from 'xlsx'
Vue.use(XLSX)
export default {name: "HelloWorld",props: { msg: String, msg1: String,onSuccess: Function },data() {return {tableData: [],loading: false,tableData: [],tableHeader: []};},methods: {handleDrop(e) {e.stopPropagation()e.preventDefault()if (this.loading) returnconst files = e.dataTransfer.filesif (files.length !== 1) {this.$message.error('仅支持单个上传一个文件')return }const rawFile = files[0] // 获取文件信息if (!this.isExcel(rawFile)) { //是不是excel文件this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')return false}this.upload(rawFile)e.stopPropagation()e.preventDefault()},handleDragover(e) {e.stopPropagation()e.preventDefault()e.dataTransfer.dropEffect = 'copy'},handleUpload() {this.$refs['excel-upload-input'].click()//触发表单上传事件，跳出选择文件框},handleClick(e) {// console.log(e);const files = e.target.filesconst rawFile = files[0] // only use files[0]if (!rawFile) returnthis.upload(rawFile)},upload(rawFile) {this.$refs['excel-upload-input'].value = null // fix can't select the same excelif (!this.beforeUpload) {this.readerData(rawFile)return}const before = this.beforeUpload(rawFile) //判断文件上传大小if (before) {this.readerData(rawFile) //把excel转化成数组}},beforeUpload(file) {const isLt1M = file.size / 1024 / 1024 < 1if (isLt1M) {return true}this.$message({message: '请不要上传大于1M的文件',type: 'warning'})return false},readerData(rawFile) {this.loading = truereturn new Promise((resolve, reject) => {const reader = new FileReader()reader.readAsArrayBuffer(rawFile)//参数可以是 Blob 或者 File 对象异步结果将在onload 事件中体现reader.onload = e => {const data = e.target.result console.log(data);const workbook = XLSX.read(data, { type: 'array' }) console.log("workbook",workbook);//看下图const firstSheetName = workbook.SheetNames[0]// console.log("firstSheetName",firstSheetName);// "SheetJS" 取出工作表名称const worksheet = workbook.Sheets[firstSheetName] //取出工作表名称对应的表格数据const header = this.getHeaderRow(worksheet) //表头名// console.log("header",header);const results = XLSX.utils.sheet_to_json(worksheet)//输出数据，除去表头//{timestamp: "2017-01-01 07:37:20",title: "Mtiwxlj Cqcdg Hvbjijr Vgmeey Wwznq Ljjnkvbz",//type: "US",importance: 2,status: "draft"} results的其中一列数据this.tableData = results;this.tableHeader= header;this.loading = falseresolve()}})},getHeaderRow(sheet) {const headers = []const range = XLSX.utils.decode_range(sheet['!ref']) //!ref: "A1:E21"// console.log(range);// s: {c: 0, r: 0} 开始为A1// e: {c: 4, r: 20} 结束为 E21let Cconst 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 */const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]// console.log(cell); A1的对象的值/* find the cell in the first row */let hdr = 'UNKNOWN ' + C // <-- replace with your desired defaultif (cell && cell.t) hdr = XLSX.utils.format_cell(cell)// console.log(XLSX.utils.format_cell(cell));//每个头部名headers.push(hdr)}return headers},isExcel(file) {return /\.(xlsx|xls|csv)$/.test(file.name)}}};
</script>

vue项目中引入.xlsx文件相关推荐

vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...
styl类型文件css,vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...
如何在 vue 项目中引入 html 文件
这里以 vue-cli3 为例子,在pubilc目录下引入html就行了如果需要查看的可用下面的方法 1 window.open(`/ssh-terminal-template/index.html ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...

vue项目中引入.xlsx文件

安装3个依赖包

template部分

js部分

vue项目中引入.xlsx文件相关推荐

最新文章

热门文章