精华内容
下载资源
问答
  • 文件读取~~~表格数据excel读取数据.jpg// template// 文件选择,或者使用原生 imput type 为 fileaction="/":on-change='onChange':auto-upload='false':show-file-list="false"accept=".xls, .xlsx">选择文件{{ ...

    文件读取~~~

    表格数据

    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一直没有写出来,今天终于忙里偷闲,有机会把这篇文章写出来给大家了。

    老规矩先看效果图

    a6d0314f403e84399514f5e908b2e06e.png

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

    流程图

    5fed2d5adb7b9248887818cc99fdc587.png

    通过流程图,我看看到我们这里使用了云函数,云存储,云数据库。
    流程图主要实现下面几个步骤
    • 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

      e062f5c7d5964cd1b424d0b7c3dca9bd.png


      对应的wxml代码如下

      aa7ba840823799c92777fcbd9634fb08.png
    • 2,编写文件选择和文件上传方法

      2d4cbb650f1148f0f512c963ce8c4ea7.png


      上图的chooseExcel就是我们的excel文件选择方法。
      uploadExcel就是我们的文件上传方法,上传成功以后会返回一个fildID。我们把fildID传递给我们的jiexi方法,jiexi方法如下

    • 3 把fildID传递给云函数

      6da4fb1d7c7f27fb963275e9fccfdf46.png

    二,接下来就是定义我们的云函数了。

    • 1,首先我们要新建云函数

      2c13625bcb50c4a78f0b41cd3aff6e38.png


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

      11913bee7cfdfff0fff3332204d522de.png
    • 2,安装node-xlsx依赖库

      9989fd5e740b6a4dba4aee1a354f1e30.png


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

      fd588381b70407ceb3605e089e03af81.png


      这一步需要你电脑上安装过node.js并配置npm命令。

    • 3,安装node-xlsx依赖库完成

      f80a20e8ced2da8f46c15678aec9ed6c.png

    三,编写云函数

    我把完整的代码贴出来给大家

    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,要先创建数据表

      506632fa97ab427da6e40a7c05ff377d.png
      image.png
    • 2,有时候如果老是解析失败,可能是有的电脑需要在云函数里也要初始化云开发环境

      4f44057daaab9230fc483cbce1a7d876.png

    四,解析并上传成功

    如我的表格里有下面三条数据

    d37feaf4a52c31c3c0f8ecf443d2d530.png

    点击上传按钮,并选择我们的表格文件
    4ec99211834f10751e8e4be4216a7580.png

    上传成功的返回如下,可以看出我们添加了3条数据到数据库
    8daff25704ee8d6ee93b35a20f3b2a90.png

    添加成功效果图如下

    3dcdee95dca07938d70260c787bbacce.png

    到这里我们就完整的实现了小程序上传excel数据到数据库的功能了。

    再来带大家看下流程图

    5fed2d5adb7b9248887818cc99fdc587.png

    目前源码先提供给年卡和季卡用户,办理过会员的同学都可以从下面链接里获取源码。石头哥等下也会在年卡群里把源码发给大家。

    9f1ab78f177567547915ef3cf8c21106.png

    303b57e4317f2701bf060751b7684c9d.png

    0b95461ba7fe9212e2949e5d756e1f2b.png

    一星期后,我会把源码免费开源出来给大家。敬请等待。

    如果你有遇到问题,可以在底部留言,我看到后会及时解答。后面我会写更多小程序云开发实战的文章出来。也会录制本节的视频出来,敬请关注。

    展开全文
  • 导读:后台管理平台经常要上传文件读取文件的内容和导出数据表,因此需要依赖第三方插件xlsx1、安装依赖npm install xlsx -S2、在目标组件vue中引入import XLSX form 'xlsx3、简单的创建并导出数据表data() {return ...

    导读:后台管理平台经常要上传文件读取文件的内容和导出数据表,因此需要依赖第三方插件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, 喜欢的同学可以自行研究

    展开全文
  • 一、安装xlsxnpm install xlsx二、引入xlsximport XLSX from 'xlsx'三、模板class="import hidden-xs-only"ref="upload"action="/":show-file-list="false":on-change="import...导入Excel表格四、导入方法//导入...

    一、安装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

    展开全文
  • //读取完成的数据 var outdata; var reader = new FileReader(); reader.onload = function(e) { var bytes = new Uint8Array(reader.result); var length = bytes.byteLength; for (var i = 0; i ; i++) { binary ...
  • 转载大佬的博客,原文请看: ...今天我们来详细讲解怎样使用xlsx实现前端上传...然后,我们再使用xlsx,封装一个读取excel表格数据的组件: <template> <span style="margin-right:10px"> <input clas
  • vue Element Ui 通过 el-upload 来读取表格文件,借助 XLSX(安装: npm i XLSX -S) 来实现读取到的表格转为 JSON 数据格式,然后展示在 el-table 中。 <template> <div> <!-- 按钮 --> &...
  • vue怎么把excel转jsona={'3:39:20'}xlswrite('a.xls',a)如果你要写到其他数据表的某个单元格可以这样:a={'3:39:20'}xlswrite('a.xls',a,'sheet2','A2')?你这个就是个时间转换问题。读取的时候自己进行了时间转换,...
  • Java和Vue导出Excel表格

    千次阅读 热门讨论 2018-11-19 20:43:00
    后台:利用java pio读取Excel,配合java反射,写了一个万能的excel导出模板,只要设置表头一个数组,和你的数据模型(可能会有潜在bug,但是目前使用正常) 主要是为了大家以后避免一些坑,拿来即用     ...
  • 按钮时,打开文件夹,选择excel表并上传,读取excel表中的内容,并把内容填写至<el-table>之中,如图:   接下来需要做的是安装3个依赖和添加两个js文件: npm install -S file-saver xlsx(这里其实...
  • vue-element-xlsx在线读取Excel数据预览 1.安装XLSX npm install xlsx -s 2.复制过去就可以用 <template> <div> <!-- excel表格上传 --> <el-upload class="upload-demo" drag ...
  • 实现批量导入 读取Excel表格转换成所需data数据 附图------ 一。 1. 首先 项目中引入插件XLSX并注册 2. 下图为dom结构。。。。。。。 3. 选择文件 调用api方法读取Excel数据。并设置需要读取的thead ...
  • 第一步、导入并读取Excel功能从整体上来说两种方式,一是前端解析文件后将数据返回给后端,另一种是前端直接将Excel文档返回后台,由后台进行处理。使用哪种方法需要根据具体业务需求,下面简单介绍第一种方法:由...
  • 之前试了很多网上的方法都不行,总会出现各种各样的问题,不是这里缺东西...按钮时,打开文件夹,选择excel表并上传,读取excel表中的内容,并把内容填写至<el-table>之中,如图: 接下来需要做的是安装...
  • Vue读取Excel并以表格形式展现在页面上,并实现单元格数据可编辑第一步、安装:install第二步、引入:main.js第三步、使用:ExcelRead.vue 最近由于公司项目需求,我在画原型图的时候发现,有个功能是前端导入Excel...
  • vue项目中,客户端需要实现以excel表格形式下载数据,后端为java,接受请求 >> 读取数据库 >> 生成excel >> 返回;前端为vue:发送请求 >> 接受响应 >> 实现excel下载。 2. 案例...
  • image.png1、应用场景大多数管理后台很多...表格内容不太多的情况下单次10000条以上(单次上传量还要根据自己的项目情况而定)一般会选择这种方式,数据量太大浏览器读取的速度远远小于服务端读取对于数据量不太大的...
  • 然后,我们再使用xlsx,封装一个读取excel表格数据的组件: &lt;template&gt; &lt;span style="margin-right:10px"&gt; &lt;input class="input-file...
  • 前段时间接到一个做报表的项目,需要将数据导出成excel表格,表格模板中有很多表格是需要合并的,之前没有这方面的经验,也为难了好久,后来终于发现一个好用的js插件,完全能够实现我需要的功能,一块分享给大家;...
  • 前言:以前excel都是使用后端java或者php等语言实现数据的导入和导出,现在可以通过vue的前端项目实现表格的导入和导出,减少后端的压力。同时也可以让前端更好的助力后端。 是原始(很棒)SheetJS / xlsx项目的分支。...
  • 前言:以前excel都是使用后端java或者php等语言实现数据的导入和导出,现在可以通过vue的前端项目实现表格的导入和导出,减少后端的压力。同时也可以让前端更好的助力后端。 是原始(很棒)SheetJS / xlsx项目的分支。...
  • 需要使用的包有 XLSX npm安装: npm install --save xlsx ... :auto-upload="false" // 因为只是读取数据表格,并不需要上传到服务器 :show-file-list="false" // 因为是直接读到表格,不用展示文件列...
  • 背景简介在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中vue项目第三方exceljs安装npm install exceljselement ui文件选择el-upload数据展示el-table代码以及说明import Excel from '...
  • 二、我怎么读写表格文件1、我想分析泰坦尼克号乘客数据,它们储存在csv文件中。importpandasaspdtitanic=pd.read_csv("./data/titanic.csv")pandas提供的read_csv()函数可将csv文件中的数据读取到DataFrame中。...
  • ExcelJS可以读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件 安装(本文以在vue框架中使用为例) npm install exceljs file-saver -S 导入 import Excel from "exceljs"; import * as FileSaver from "file...
  • 想通过js-xlsx插件读取数据到vuex中,表格所在页面将tableData,columns,titleRows定义成计算字段,貌似表格不能更新,也可能是我不熟悉。</p><p>该提问来源于开源项目:huangshuwei/vue-...
  • demo29:导出Excel表格 demo30:动手实现Promise demo31:从Node层获取数据(BFF) demo32:用JavaScript实现一个栈 demo33:编写、使用MyLoading插件 demo34:日历选择器组件 demo35:图片对比 demo36:表格行数据...
  • paramquery-7.1.0.zip

    2020-08-01 08:57:14
    它提供了最快的jQuery网格,treegrid,pivot网格和电子表格等最令人垂涎​​的功能,并且基于性能,卓越的UX和开放标准的原则构建。Pro的以下功能是对ParamQuery Grid基本功能的补充。 专业功能: 也可用于...

空空如也

空空如也

1 2
收藏数 31
精华内容 12
关键字:

vue读取excel表格数据

vue 订阅