纯前端上传文件获取数据并解析，将数据导出生成文件 |
您所在的位置：网站首页 › 前端生成ppt下载 › 纯前端上传文件获取数据并解析，将数据导出生成文件 |
|
纯前端上传文件获取数据并解析，将数据导出生成文件
纯前端上传文件获取数据并解析，将数据导出生成文件上传文件获取数据并解析上传Excel文件获取数据并解析将数据导出生成文件FileReader()用法FileReader定义了3种读取文件内容的方法FileReader定义了6种处理事件
纯前端上传文件获取数据并解析，将数据导出生成文件
因为项目接口管理工具管理项目接口url、请求和响应，为了方便开发，便写了个小工具用于JSON文件上传，解析数据，数据导出。 上传文件获取数据并解析首先是一个input type=“file” 文件上传控件，并监听change方法 实现submitFile方法 这里会用到HTML5定义的FileReader方法 submitFile(e) { const that = this; var reader = new FileReader();//新建一个FileReader reader.readAsText(e.target.files[0], "UTF-8");//读取文件 reader.onload = function (evt) { //读取完文件之后会回来这里 //这里可以获取并处理文件数据，json可以用JSON.parse()转成json对象 cosnole.log(JSON.parse(evt.target.result)) } } 上传Excel文件获取数据并解析用到xlsx组件 安装xlsx npm i xlsx引入xlsx import XLSX from 'xlsx';方法 submitFile(event){ if (!event.currentTarget.files.length) { return } const that = this // 拿取文件对象 var f = event.currentTarget.files[0] // 用FileReader来读取 var reader = new FileReader() // 重写FileReader上的readAsBinaryString方法 FileReader.prototype.readAsBinaryString = function (f) { var binary = '' var reader = new FileReader() reader.onload = function (e) { // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节） var bytes = new Uint8Array(reader.result) var length = bytes.byteLength for (var i = 0; i type: 'binary' })//解析表格内容 console.log(that.wb); that.onChangeSheet(); } reader.readAsArrayBuffer(f) } reader.readAsBinaryString(f) }, onChangeSheet(val){ const that = this; if(val>=0) that.sheet = val;//that.sheet 选择第几个sheet表，从0开始 that.excelData = XLSX.utils.sheet_to_json(that.wb.Sheets[that.wb.SheetNames[that.sheet]]);//取指定sheet表中的数据 that.columns = Object.keys(that.excelData[0]).map(ele=>({ key: ele, title: ele, dataIndex: ele, width: 120 })); } 将数据导出生成文件这里提供导出json文件和导出Excel 文件两种方法。 首先是两个button，监听click方法 导出json 导出Excel实现exportJson和exportExcel方法 exportJson() { const that = this; let element = document.createElement('a'); const text = JSON.stringify({data: "json数据"}); // json数据 element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', `param${new Date().getTime()}.josn`); //生成文件名称 element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); }, exportExcel(){ const that = this; //列标题，逗号隔开，每一个逗号就是隔开一个单元格 let str = `分类,名称,URL,方法\n`; // 表头 str += that.instanceList.map((item)=>`${item.groupName}\t,${item.name}\t,${item.url}\t,${item.method}\t`).join('\n'); //encodeURIComponent解决中文乱码 let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); //通过创建a标签实现 let link = document.createElement("a"); link.href = uri; //对下载的文件命名 link.download = "json数据表.csv"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }两种方法原理都是一样的，无非是文件内容数据的处理上稍许不同。 FileReader()用法因为是HTML5定义的方法，使用前最好先检测下浏览器是否支持 if(window.FileReader) { var reader= new FileReader(); // ... } else { alert("浏览器不支持"); } FileReader定义了3种读取文件内容的方法readAsBinaryString、readAsDataURL、readAsText reader.readAsBinaryString(e.target.files[0]); // 参数：文件file。将文件读取为二进制码 reader.readAsDataURL(e.target.files[0]); // 参数：文件file。将文件读取为 DataURL，该方法将文件读取为一段以 data: 开头的字符串，一般用于小图片读取 reader.readAsText(e.target.files[0], "UTF-8"); // 参数：文件file，文本的编码方式（默认值： UTF-8）。将文件读取为文本（一般常用）FileReader还定义了一个中断读取文件的方法abort，用于中断读取文件内容。 FileReader定义了6种处理事件onabort、onerror、onload、onloadend、onloadstart、onprogress，用于监听文件读取的各个阶段，还可以结合进度条，提升用户体验。 处理事件描述说明onabort读取中断时触发onerror读取失败出错时触发onload读取成功时触发onloadend读取完成时触发（无论成功或失败）onloadstart读取开始时触发onprogress读取中触发（用于展示进度条）进度条 var reader = new FileReader();//新建一个FileReader reader.readAsText(e.target.files[0], "UTF-8");//读取文件 reader.onprogress = function(e){ constle.log(e.loaded, e.total); // 已读取的文件大小，文件总共大小 }, reader.onload = function (evt) { //读取完文件之后会回来这里 //这里可以获取并处理文件数据，json可以用JSON.parse()转成json对象 cosnole.log(JSON.parse(evt.target.result)) } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |