文件读取~~~
表格数据
excel读取数据.jpg
// template
// 文件选择，或者使用原生 imput type 为 file
action="/"
:on-change='onChange'
:auto-upload='false'
:show-file-list="false"
accept=".xls, .xlsx"
>
选择文件
{{ fileData.name }}
// js
data() {
return {
outputs: [], // 保存读取出来的数据
fileData:'', // 保存选择的文件
};
},
methods: {
// 文件选择回调
onChange(file,fileList){
this.fileData = file // 保存当前选择文件
this.readExcel() // 调用读取数据的方法
},
// 读取数据
readExcel(e) {
let that = this;
const files = that.fileData;
console.log(files);
if (!files) {
//如果没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
// console.log(data)
const workbook = XLSX.read(data, {
type: "binary"
});
console.log(workbook.SheetNames)
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 < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
name:ws[i]['姓名'],
age:ws[i]['年龄'],
};
that.outputs.push(sheetData);
}
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
}
}

	

最近一直比较忙，答应大家的小程序解析excel一直没有写出来，今天终于忙里偷闲，有机会把这篇文章写出来给大家了。
老规矩先看效果图

效果其实很简单，就是把excel里的数据解析出来，然后存到云数据库里。说起来很简单。但是真的做起来的时候，发现其中要用到的东西还是很多的。不信。。。。那来看下流程图
流程图

通过流程图，我看看到我们这里使用了云函数，云存储，云数据库。
流程图主要实现下面几个步骤
1，使用wx.chooseMessageFile选择要解析的excel表格
2，通过wx.cloud.uploadFile上传excel文件到云存储
3，云存储返回一个fileid 给我们
4，定义一个excel云函数
5，把第3步返回的fileid传递给excel云函数
6，在excel云函数里解析excel，并把数据添加到云数据库。
可以看到最神秘，最重要的就是我们的excel云函数。
所以我们先把前5步实现了，后面重点讲解下我们的excel云函数。
一，选择并上传excel表格文件到云存储
这里我们使用到了云开发，使用云开发必须要先注册一个小程序，并给自己的小程序开通云开发功能。这个知识点我讲过很多遍了，还不知道怎么开通并使用云开发的同学，去翻下我前面的文章，或者看下我录的讲解视频《5小时入门小程序云开发》
1，先定义我们的页面
页面很简单，就是一个按钮如下图，点击按钮时调用chooseExcel方法，选择excel

对应的wxml代码如下
2，编写文件选择和文件上传方法

上图的chooseExcel就是我们的excel文件选择方法。
uploadExcel就是我们的文件上传方法，上传成功以后会返回一个fildID。我们把fildID传递给我们的jiexi方法，jiexi方法如下
3 把fildID传递给云函数
二，接下来就是定义我们的云函数了。
1，首先我们要新建云函数

如果你还不知道如何新建云函数，可以翻看下我之前写的文章，也可以看我录的视频《5小时入门小程序云开发》
如下图所示的excel就是我们创建的云函数
2，安装node-xlsx依赖库

如上图所示，右键excel，然后点击在终端中打开。打开终端后，
输入   npm install node-xlsx   安装依赖。可以看到下图安装中的进度条

这一步需要你电脑上安装过node.js并配置npm命令。
3，安装node-xlsx依赖库完成
三，编写云函数
我把完整的代码贴出来给大家
const cloud = require('wx-server-sdk')
cloud.init()
var xlsx = require('node-xlsx');
const db = cloud.database()

exports.main = async(event, context) => {
  let {
    fileID
  } = event
  //1,通过fileID下载云存储里的excel文件
  const res = await cloud.downloadFile({
    fileID: fileID,
  })
  const buffer = res.fileContent

  const tasks = [] //用来存储所有的添加数据操作
  //2,解析excel文件里的数据
  var sheets = xlsx.parse(buffer); //获取到所有sheets
  sheets.forEach(function(sheet) {
    console.log(sheet['name']);
    for (var rowId in sheet['data']) {
      console.log(rowId);
      var row = sheet['data'][rowId]; //第几行数据
      if (rowId > 0 && row) { //第一行是表格标题，所有我们要从第2行开始读
        //3，把解析到的数据存到excelList数据表里
        const promise = db.collection('users')
          .add({
            data: {
              name: row[0], //姓名
              age: row[1], //年龄
              address: row[2], //地址
              wechat: row[3] //wechat
            }
          })
        tasks.push(promise)
      }
    }
  });

  // 等待所有数据添加完成
  let result = await Promise.all(tasks).then(res => {
    return res
  }).catch(function(err) {
    return err
  })
  return result
}
上面代码里注释的很清楚了，我这里就不在啰嗦了。
有几点注意的给大家说下
1，要先创建数据表
2，有时候如果老是解析失败，可能是有的电脑需要在云函数里也要初始化云开发环境
四，解析并上传成功
如我的表格里有下面三条数据

点击上传按钮，并选择我们的表格文件

上传成功的返回如下，可以看出我们添加了3条数据到数据库
添加成功效果图如下
到这里我们就完整的实现了小程序上传excel数据到数据库的功能了。
再来带大家看下流程图
目前源码先提供给年卡和季卡用户，办理过会员的同学都可以从下面链接里获取源码。石头哥等下也会在年卡群里把源码发给大家。
一星期后，我会把源码免费开源出来给大家。敬请等待。
如果你有遇到问题，可以在底部留言，我看到后会及时解答。后面我会写更多小程序云开发实战的文章出来。也会录制本节的视频出来，敬请关注。
	

导读：后台管理平台经常要上传文件读取文件的内容和导出数据表，因此需要依赖第三方插件xlsx
1、安装依赖
npm install xlsx -S
2、在目标组件vue中引入
import XLSX form 'xlsx
3、简单的创建并导出数据表
data() {
return {
xlxsData: [  // 源数据
{
'type': '颜色',
'ID': '34234',
'name': 'Light Pink'
}
]
}
},
methods: {
downExcle() {
const outputXlsxFile = (data, header, xlsxName) => {
const ws = XLSX.utils.json_to_sheet(data, header)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
XLSX.writeFile(wb, xlsxName + '.xlsx')
};
// 理想数据模型
//let data = [
//　　{
//　　　　"类型": "颜色",
//　　　　"id": "34234",
//　　　　"名称": "Light Pink"
//　　}
//];
// 实际数据模型 this.xlxsData
// 映射表头mapList
const mapList= {
"type": "类型",
"id": "ID",
"name": "名称"
}
let header = {
header: Object.values(mapList)  // 获取中文表头
}
// 调用filterJson函数进行JSON转化
outputXlsxFile(this.filterJson(mapList), header, '标签批量模版')
},
// 将中文映射成英文键
filterJson(mapList) {let res = [];
this.xlxsData.map(item => { // 对源数据处理，将英文键转化成中文
let obj = {}
for (let key in mapList)
obj[mapList[key]] = item[key] // 保持xlxsMap的键和源数据一致，否则会有数据会缺少
}
res.push(obj)
})
return res
}
}
注： 一般data的格式不会是中文键名，因此需要过滤函数，进行转化
4、导入并读取excel文件
action="/"
:on-change="uploadChange"
:show-file-list="false"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false">
导入数据
data() {
return {
xlscList: [],
xlscTitle: {
"类型": "type"
"ID": "id",
"名称": "name"
},
}
},
methods:{
uploadChange(file) {
let self = this;
const types = file.name.split('.')[1];
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => {
return item === types
});
if (!fileType) {
this.$message.error('文件格式错误，请重新选择文件！')
}
this.file2Xce(file).then(tab => {
// console.log(tab)
// 过滤，转化正确的JSON对象格式
if (tab && tab.length > 0) {
tab[0].sheet.forEach(item => {
let obj = {};
for (let key in item) {
obj[self.xlscTitle[key]] = item[key];
}
self.xlscList.push(obj);
});
// console.log(self.xlscList)
if (self.xlscList.length) {
this.$message.success('上传成功')
// 获取数据后，下一步操作
} else {
this.$message.error('空文件或数据缺失，请重新选择文件！')
}
}
})
},
// 读取文件
file2Xce(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
this.wb = Xlsx.read(data, {
type: "binary"
});
const result = [];
this.wb.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: Xlsx.utils.sheet_to_json(this.wb.Sheets[sheetName])
})
})
resolve(result);
}
reader.readAsBinaryString(file.raw);
})
}
注： 以上的导出的excel不能自定义样式，需要一样插件xlsx-style, 喜欢的同学可以自行研究

一、安装xlsx
npm install xlsx
二、引入xlsx
import XLSX from 'xlsx'
三、模板
class="import hidden-xs-only"
ref="upload"
action="/"
:show-file-list="false"
:on-change="importExcel"
:auto-upload="false"
>
导入Excel表格
四、导入方法
//导入
importExcel(file) {
// let file = file.files[0] // 使用传统的input方法需要加上这一步
const types = file.name.split('.')[1]
const fileType = ['xlsx','xls'].some((item) => item === types)
if (!fileType) {
this.$message('格式错误！请下载词库导入模板编辑后上传')
return false
}
this.file2Xce(file).then((tabJson) => {
if (tabJson && tabJson.length > 0) {
this.xlsxJson = tabJson//Excel表格的数据
//...
//...
//处理表格数据的操作
}
})
},
file2Xce(file) {
return new Promise(function(resolve) {
const reader = new FileReader()
reader.onload = function(e) {
const data = e.target.result
this.wb = XLSX.read(data, {
type: 'binary',
})
const result = []
this.wb.SheetNames.forEach((sheetName) => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName]),
})
})
resolve(result)
}
reader.readAsBinaryString(file.raw)
// reader.readAsBinaryString(file) // 传统input方法
})
},
//导入 end