vue预览excel

npm i xlsx -S


<template><div class="excel-wrapper"><!-- 上传按钮 --><input class="input-file"type="file"@change="exportData"style="display:none"accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /><el-button type="success"size="small"@click="btnClick">上传excel</el-button><!-- END --><!-- 表格 --><el-table :data="tableData"style="width: 100%"height="450"size="mini"><el-table-column :prop="item":label="item"width="140"v-for="(item,index) in checkboxTableColumn":key="'column'+index"></el-table-column></el-table><!-- END --><!-- 分页 --><el-pagination v-if="excelData != 0"@size-change="handleSizeChange"@current-change="CurrentChange":current-page="currentPage":page-sizes="[10, 20, 30,40,50,100,200,500]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!-- END --></div>
</template><script>
import * as XLSX from 'xlsx'
export default {data() {return {//所有键的值columnHeader: [],// 导入的excel的数据excelData: [],// 表格显示列checkboxTableColumn: [],//表格数据tableData: [],// 当前分页currentPage: 1,// 每页显示数量pageSize: 10,// 数据总数total: 0,}},methods: {// 将上传input框点击事件改为按钮btnClick() {document.querySelector('.input-file').click()},// 解析excelexportData(event) {if (!event.currentTarget.files.length) {return}const that = this// 拿取文件对象let f = event.currentTarget.files[0]//这里已经拿到了excel的file文件，若是项目需求，可直接$emit丢出文件// that.$emit('getMyExcelData',f);// 用FileReader来读取let reader = new FileReader()// 重写FileReader上的readAsBinaryString方法// FileReader.prototype.readAsBinaryString = function(f) {//   let binary = "";//   let wb; // 读取完成的数据//   let outdata; // 你需要的数据//   let reader = new FileReader();reader.onload = function (e) {// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）// let bytes = new Uint8Array(reader.result);// let length = bytes.byteLength;// for (let i = 0; i < length; i++) {//   binary += String.fromCharCode(bytes[i]);// }var data = e.target.result// 接下来就是xlsxvar wb = XLSX.read(data, {type: 'buffer',})var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])// 导出格式为json，{表数据：[]}console.log(outdata)that.excelData = outdatathat.tableData = outdata.slice(0, 10)that.total = outdata.length// 获取数据的keyvar importDataThead = Array.from(Object.keys(outdata[0])).map((item) => {return item})that.columnHeader = importDataTheadthat.checkboxTableColumn = importDataThead.slice(0, 9)console.log(importDataThead)}reader.readAsArrayBuffer(f)// };// reader.readAsBinaryString(f);},// 分页切换CurrentChange(val) {this.currentPage = valthis.tableData = this.excelData.slice((val - 1) * this.pageSize,val * this.pageSize - 1)},// 每页显示数量改变handleSizeChange(val) {this.pageSize = valthis.tableData = this.excelData.slice((this.currentPage - 1) * val,this.currentPage * val - 1)},},
}
</script>
<style  scoped>
.excel-wrapper {/* height: 100vh; *//* width: 600px; */overflow: scroll;background: rgb(226, 226, 226);padding: 20px;
}
</style>

vue预览excel相关推荐

vue预览word,excel,pptx,pdf文件
vue预览word,excel,pptx,pdf文件 1.做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问先把文件路径的url进行u ...
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）
Vue 预览word,excel等office 先看效果!! 需求背景:在前端页面中预览office文件且是内网访问,服务器不可访问外网的前提. 因此微软的接口就废掉了,因为他接口的条件是可以访问外网 ...
vue 实现在线预览excel
一.思路由于项目中要求excel能够在线预览,且excel文件并非本地而是后端那边提供的.因此提供一下本人在项目的解决思路: 1.让后端返回二进制文件流 2.将文件流转为file对象 3.通过luc ...
luckysheet+luckyexcel在线预览excel
luckysheet,是一款纯前端的在线excel,功能强大,完全开源如果在线预览excel的需求,可以使用xlsx插件,但是这个插件只能解析表格中的数据,如果表格中的样式和数据都要解析出来,就需要 ...
h5页面如何预览excel文件_kintone excel预览插件
Index 概要这次为大家分享的是,如何用js写出excel文件的预览. 他方便了pc用户和手机端用户可以无需下载,并且直接在线预览excel文件. 因为excel转html的显示用的是第三方开源库 ...
在网页中预览excel表格文件
项目需求在前端页面中实现预览excel表格的功能,上网了解之后大致总结为一下几种方法. 1.office文档转换为pdf,再转swf,然后通过网页加载flash进行预览 2.通过 xlsx.js,js ...
浏览器预览Excel、PPT、Word
浏览器预览Excel.PPT.Word 网上搜了一大堆没用的,有什么poi解析,麻痹我特么一个Excel有多难排格式,有多复杂啊,我解析你妹啊,输出来个大文本谁看啊.还有什么安插件的.第三方服务的,真 ...
文件预览：使用xlsx预览excel文件
文件预览系列: mavon-editor预览Markdown文件 xlsx预览excel文件注意事项: 多sheet页的情况需要自己手动处理一.安装插件:xlsx // 我目前使用的是0.17.5 ...
HTML实现在线预览Excel,word,ppt
使用office提供的在线预览功能 https://view.officeapps.live.... src后面接你需要预览的文件下载地址. 如果不能实现预览功能,提示报错请检查http返回的Con ...

vue预览excel

vue预览excel相关推荐

最新文章

热门文章