vueexcel上传预览和table内容下载到excel文件中_vueexcel预览 - CSDN文库

170 浏览量更新于2023-05-04 收藏 62KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

vue excel上传预览和上传预览和table内容下载到内容下载到excel文件中文件中

excel上传预览

这里会用到

npm i element-ui

npm i xlsx

在vue的template中写上，排版和css看个人需求

<div> 选择文件

<input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,

application/vnd.ms-excel" />

</div>

<div @click="fileBtn">上传到服务器</div>

<el-table class="listTable_ele" :data="listTable" stripe height="250" style="width:100%">

<el-table-column prop="name" label="员工姓名" width="180" align="center"></el-table-column>

<el-table-column prop="department" label="职务/部门" align="center"></el-table-column>

</el-table>

vue的js中写上

export default {

data() {

return {

listTable: [] }

},

methods:{

// 上传预览

importf(obj) {

let that= 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"

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38734492

粉丝: 5
资源: 972

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈