精华内容
下载资源
问答
  • vue读取excel表格

    2020-12-07 11:07:14
    vue读取excel表格 安装xlsx npm install xlsx --save-dev 引入插件 import xlsx from 'xlsx' 上传读取 <input type="file" ref="upload" accept=".xls,.xlsx" @change="readExcel

    vue读取excel表格

    安装xlsx

    npm install xlsx --save-dev
    

    引入插件

    import xlsx from 'xlsx'
    

    上传读取

    	<input
                        type="file"
                        ref="upload"
                        accept=".xls,.xlsx"
                        @change="readExcel"
                        class="upload-button"
                    />
                    <span class="tips">支持扩展名:.xls .xlsx,且不超过100M</span>
    
    data() {
          return {
            excelData:'',
          };
    
    	readExcel (e) {
              console.log(e)
            const files = e.target.files;
    
            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表格内容
                    // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
                    // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
                    // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
                    // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表(具有值回退)
                    // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本
                    console.log(ws)
    
                    this.excelData = [] // 清空接收数据
                    if(this.excelData.length) {
                        this.fileName = files[0].name;
                    }
                    } catch (e) {
    
                    return false
                }
            }
            fileReader.readAsBinaryString(files[0]);
          },
    
    展开全文
  • vue下载excel表格模板和导入excel表格数据vue制作excel表格模板给前端下载 vue制作excel表格模板给前端下载 最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载。 首先做好模板下载 <el-row> ...

    vue下载excel表格模板和导入excel表格数据

    vue制作excel表格模板给前端下载

    最近有个需求,需要导入excel表格,并且还需要制作模板给用户下载。

    首先做好模板下载

     <el-row>
              <el-col :offset="20" :span="4">
                <el-button size="mini" type="primary" @click="downUp">下载模板</el-button>
                <el-button style="position:relative;overflow:hidden;margin-right:10px" size="mini" type="primary">
                  <span>导入</span>
                  <input @change="importf(this)" type="file" ref="upload" accept=".xls, .xlsx" style="opacity: 0;position: absolute; top: 0;left: 0;bottom:0"/>
                </el-button>
              </el-col>
      </el-row>
    

    制作模板如下

    //下载模板
          downUp(){
            const jsonData = [{codeStr:4301010010001,tenantName:'株洲地级市',currentVal:1000}];
            if (!jsonData.length) return;
            // 表格的列标题 如果出现科学技术法或者其他格式 使用 \t
            let title = '门店编号,门店名称,销售额\n';
            jsonData.map(item => {
              let key = {};
              key['门店编号'] = item.codeStr;
              key['门店名称'] = item.tenantName;
              key['销售额'] = item.currentVal;
              for (let i in key){
                title += `${key[i] + '\t'},`
              }
              title += '\n'
            });
            // encodeURIComponent 解决中文乱码
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title);
            // 创建a标签
            let link = document.createElement('a');
            link.href = uri;
            link.download='门店计划导入.xls';
            link.click()
          },
    

    导入excel表格数据

    //导入
          importf(obj) {
            let _this = this;
            let inputDOM = this.$refs.inputer;   // 通过DOM取文件数据
            this.file = event.currentTarget.files[0];
            var rABS = false; //是否将文件读取为二进制字符串
            var f = this.file;
            var reader = new FileReader();
            //if (!FileReader.prototype.readAsBinaryString) {
            FileReader.prototype.readAsBinaryString = function(f) {
              var binary = "";
              var rABS = false; //是否将文件读取为二进制字符串
              var pt = this;
              var wb; //读取完成的数据
              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 < length; i++) {
                  binary += String.fromCharCode(bytes[i]);
                }
                var XLSX = require('xlsx');
                if(rABS) {
                  wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                    type: 'base64'
                  });
                } else {
                  wb = XLSX.read(binary, {
                    type: 'binary'
                  });
                }
                // outdata就是你想要的东西 excel导入的数据
                outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                // excel 数据再处理
                let arr = [];
                outdata.map(v => {
                  let obj = {};
                  obj.codeStr = v.门店编号;
                  obj.tenantName = v.门店名称;
                  obj.currentVal = v.销售额;
                  arr.push(obj)
                });
                _this.accountList = [...arr];
                console.log( _this.accountList);
                _this.tableData1=[...arr]
                // _this.reload();
              };
              reader.readAsArrayBuffer(f);
            };
            if(rABS) {
              reader.readAsArrayBuffer(f);
            } else {
              reader.readAsBinaryString(f);
            }
          },
    
    展开全文
  • vue读取excel

    2020-07-21 11:03:59
    1、安装依赖 npm install --save xlsx file-saver 2、引入依赖 import FileSaver from 'file-saver' ...inputtype="file"@change="importExcel($event)"/> 4、定义方法 importExcel(e){ constthat=this; ...

    1、安装依赖

    npm install --save xlsx file-saver

    2、引入依赖

        import FileSaver from 'file-saver'
        import XLSX from 'xlsx'

    3、使用input的file类型

    <input type="file" @change="importExcel($event)" />

    4、定义方法

     importExcel(e) {

          const that = this;

          that.tableData = [];

          that.tableName = [];

          let files = e.target.files;

          let fileReader = new FileReader();

          let data,workbook,persons = []

          fileReader.onload = function(ev) {

            console.log(ev, "ev");

            try {

              data = ev.target.result

              workbook = XLSX.read(data, {

                  type: "binary"

                }), // 以二进制流方式读取得到整份excel表格对象

                 

            } catch (e) {

              console.log("文件类型不正确");

              return;

            }

            // 表格的表格范围,可用于判断表头是否数量是否正确

            let fromTo = "";

            // 遍历每张表读取

            for (let sheet in workbook.Sheets) {

              if (workbook.Sheets.hasOwnProperty(sheet)) {

                fromTo = workbook.Sheets[sheet]["!ref"];

                // console.log(fromTo);

                persons = persons.concat(

                  XLSX.utils.sheet_to_json(workbook.Sheets[sheet])

                );

                // break; // 如果只取第一张表,就取消注释这行

              }

            }

            console.log(persons);

            for (let i in persons) {

    //format为自定义时间转换方法

              persons[i]["记录时间"] = format(

                excel_time_to_timestamp(persons[i]["记录时间"]),

                "yyyy-MM-dd HH:mm:ss"

              );

            }

            that.tableData = persons;

            for (let i in persons[0]) {

              that.tableName.push(i);

            }

          };

          // 以二进制方式打开文件

          fileReader.readAsBinaryString(files[0]);

    //excel时间类型转成时间戳

          function excel_time_to_timestamp(excelTime) {

            const second = 25569,

              day_timestamp = 24 * 60 * 60 * 1000;

            return (+excelTime - second) * day_timestamp;

          }

        },

    展开全文
  • vue Element Ui 通过 el-upload 来读取表格文件,借助 XLSX(安装: npm i XLSX -S) 来实现读取到的表格转为 JSON 数据格式,然后展示在 el-table 中。 <template> <div> <!-- 按钮 --> &...

    前言

    vue Element Ui 通过 el-upload 来读取表格文件,借助 XLSX(安装: npm i XLSX -S) 来实现读取到的表格转为 JSON 数据格式,然后展示在 el-table 中。


    
    <template>
    	<div>
    		<!-- 按钮 -->
    	     <el-upload
    	       class="upload"
    	       action=""
    	       :multiple="false"
    	       :show-file-list="false"
    	       accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    	       :http-request="httpRequest">
    	       <el-button size="small" type="primary">上传</el-button>
    	     </el-upload>
    	     <!-- 按钮 end -->
    	     <br />
             <!-- 列表 -->
    	        <el-table
    	          :data="tableData"
    	          border
    	          style="width: 100%">
    	          <el-table-column
    	            prop="ID"
    	            label="ID"
    	            width="180">
    	          </el-table-column>
    	          <el-table-column
    	            prop="name"
    	            label="名字">
    	          </el-table-column>
    	        </el-table>
           	 <!-- 列表 end -->
         </div>
    </template>
    
    <script>
    import XLSX from 'xlsx'
    
    export default {
    	data () {
    		return {
    			tableData: []
    		}
    	},
    	methods: {
    	    httpRequest (e) {
    	      let file = e.file // 文件信息
    	      console.log('e: ', e)
    	      console.log('file: ', e.file)
    
            if (!file) {
              // 没有文件
              return false
            } else if (!/\.(xls|xlsx)$/.test(file.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 exlname = workbook.SheetNames[0] // 取第一张表
                const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
                console.log(exl)
                // 将 JSON 数据挂到 data 里
                this.tableData = exl
                // document.getElementsByName('file')[0].value = '' // 根据自己需求,可重置上传value为空,允许重复上传同一文件
              } catch (e) {
                console.log('出错了::')
                return false
              }
    	    }
          fileReader.readAsBinaryString(file)
    	}
    }
    </script>
    
    展开全文
  • vue读取excel内容转JSON

    千次阅读 2019-08-31 12:15:32
    Hello大家周末好,今天说一下读取excel转为JSON。 第一步安装: cnpm i xlsx --save-dev //需要依赖插件: 安装过后就可以在需要的组件中引入即可 第二步引入: import XLSX from "xlsx"; //引入 第三步使用: ...
  • Vue读取网络路径Excel文件转换为Html预览,打印前言一、预览EXCEL文件1.获取网络路径Excel文件2.转换格式后的数据3.最终结果二、打印文件 前言 我们需要对一些Excel文件进行预览,那么可以调用第三方的接口转到别的...
  • 转载大佬的博客,原文请看: ...今天我们来详细讲解怎样使用xlsx实现前端上传...然后,我们再使用xlsx,封装一个读取excel表格数据的组件: <template> <span style="margin-right:10px"> <input clas
  • Vue中如何导入并读取Excel数据

    万次阅读 多人点赞 2019-08-14 15:26:03
    vue+xlsx导入excel读取数据
  • vue导出excel表格Blob,Export2Excel
  • vue + elementui 实现前端读取 excel 表格内容

    千次阅读 热门讨论 2020-09-28 11:29:17
    最近公司有个需求,将excel表格内容展示到页面中,然后查看展示出来的内容没有问题,再将内容上传到服务端 网上有很多方法,但是楼主并未找到一个适合自己的(搜到的都不怎么好用),所以自己结合网上其他前辈的文章,...
  • 一、导入Excel 并读取excel数据 1、使用element的组件el-upload先完成上传excel的步骤(获取上传的file) html <el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed=...
  • 后端接口会返回相应的模板文件,然后前端在模板文件里面写好数据,把模板文件post给接口,接口读取文件返回读取的数据给前端,其实就是把读取Excel表格数据给后端处理,这种方式感觉比较麻烦)我是使用elment ui...
  • 表格使用的avue <template> <basic-container> <avue-crud ref="crud" v-model="form" :page="page" :data="tableData" :table-loading="tableLoading" :option="table" > <template...
  • 由于功能需要,需从本地Excel中导入已有的数据,以免去手动复制粘贴的麻烦 环境:vue + ElementUI 关键代码如下: 先是elementUI的上传控件,设置action, http-request等标签属性。由于不需要直接发请求上传到服务器...
  • 前言:以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库;从而实现数据库的存入流程。...Vueexcel中的数据进行提取需要js-xlsx...
  • 需要导入excel,并获取Excel文件中的内容 最后需要的数据格式: [ { name:'tom', age:18, gender:'男' }, { name:'candy', age:18, gender:'女' } ] 代码如下: // template // 需要使用input type="file...
  • Java和Vue导出Excel表格

    千次阅读 热门讨论 2018-11-19 20:43:00
    后台:利用java pio读取Excel,配合java反射,写了一个万能的excel导出模板,只要设置表头一个数组,和你的数据模型(可能会有潜在bug,但是目前使用正常) 主要是为了大家以后避免一些坑,拿来即用     ...
  • 实现批量导入 读取Excel表格转换成所需data数据 附图------ 一。 1. 首先 项目中引入插件XLSX并注册 2. 下图为dom结构。。。。。。。 3. 选择文件 调用api方法读取Excel数据。并设置需要读取的thead ...
  • vue-element-xlsx在线读取Excel数据预览 1.安装XLSX npm install xlsx -s 2.复制过去就可以用 <template> <div> <!-- excel表格上传 --> <el-upload class="upload-demo" drag ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,028
精华内容 411
关键字:

vue读取excel表格数据

vue 订阅