vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组

因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据。找了网上的资料后发现js-xlsx可以实现。

首先安装依赖：

$ npm install xlsx

HTML部分：

引入：

import XLSX from 'xlsx'

设置数据：

data() {

return {

outputs: []

}

给input标签绑定监听事件：

mounted() {

this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件

this.readExcel(e);

})

读取excel文件信息并输出内容：

methods: {

readExcel(e) {//表格导入

var that = this;

const files = e.target.files;

console.log(files);

if(files.length<=0){//如果没有文件名

return false;

}else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){

this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');

return false;

}

const fileReader = new FileReader();

fileReader.onload = (ev) => {

try {

const data = ev.target.result;

const workbook = XLSX.read(data, {

type: 'binary'

});

const wsname = workbook.SheetNames[0];//取第一张表

const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容

console.log(ws);

that.outputs = [];//清空接收数据

for(var i= 0;i

var sheetData = {

address: ws[i].addr,

value: ws[i].value

}

that.outputs.push(sheetData);

}

this.$refs.upload.value = '';

} catch (e) {

return false;

}

};

fileReader.readAsBinaryString(files[0]);

}

输出结果示例(outputs)：

[{

addr:'abcadadadad',

value:0.001

{

addr:'abcadadadad',

value:0.001

}]

注意：

excel的第一行必须是对应的键值，比如：

addr

value

abcadadadad

0.001

abcadadadad

0.001

vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组相关推荐

python 读取excel图片_如何用Python读取Excel中图片？
公众号: 早起Python 作者:刘早起大家好,在使用Python进行办公自动化操作时,一定少不了与Excel表格的交互,我们通常是用pandas处理表格数据,但大多数情况下,都是读取表格中的数值进 ...
怎么用python读取excel图_如何用Python读取Excel中图片？
公众号: 早起Python 作者:刘早起大家好,在使用Python进行办公自动化操作时,一定少不了与Excel表格的交互,我们通常是用pandas处理表格数据,但大多数情况下,都是读取表格中的数值进 ...
java中读取excel数据类型_在Java中读取Excel文件的内容
利用JExcelApi来动态生成excel文档首先,请到http://www.andykhan.com/jexcelapi/index.html下载java excel api,主页上同时有比较详细 ...
excel导出_学习笔记—— 前端导出excel
这两天工作上来了两个需求,一个是打印的功能,一个是导出的功能.功能其实之前已经做出来了,打印我用的是printjs的插件,excel用的是Export2Excel.js,但是产品要求打印页面和导出的e ...
利用Spring-Boot解析Excel、用Java分析Excel、告别手动输入用程序读取Excel
利用Spring-Boot解析Excel.用Java分析Excel.告别手动输入用程序读取Excel 一.资源 java读取Excel文件二.修改 (一)中的代码中的 import service. ...
php 读取解析excel文件内容,怎么用PHP读取Excel文件信息及内容？（图文+视频教程）...
本篇文章将要给大家详细介绍如何用PHP读取Excel文件数据及内容信息. 在文章开始介绍前,大家需要了解一下PHPExcel是什么?PHPExcel 就是一个用来操作Office Excel 文档的P ...
get vue 和set 用法_深入剖析Vue源码 - 数据代理，关联子父组件
简单回顾一下这个系列的前两节,前两节花了大篇幅讲了vue在初始化时进行的选项合并.选项配置是vue实例化的第一步,针对不同类型的选项,vue提供的丰富选项配置策略以保证用户可以使用不同丰富的配置选项. ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
vue 回车查询按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...

vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组

vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组相关推荐

最新文章

热门文章