首页 > 其他分享 >vue中上传、下载xlsx文件方法

vue中上传、下载xlsx文件方法

时间:2022-10-24 18:11:20浏览次数:105  
标签:xlsx vue const json let file link 上传

1.xlsx依赖引入

npm install xlsx --save

2.downloadExcel模板下载(参数:file_Name、file_List)

var XLSX = require('xlsx');

// const sheetName = '模板';
// const file_Name = '模板.xlsx';
// const json = this.templateData;

const fileName = file_Name;
const json = file_List;
const type = 'xlsx';

// 导出到excel
let keyMap = []; // 获取键
for (let k in json[0]) {
    if (json[0].hasOwnProperty(k)) {
        keyMap.push(k)
    }
}
let tmpdata = []; // 用来保存转换好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
    v: v[k] || '',
    position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
}))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
    tmpdata[v.position] = {
        v: v.v
    }
})
console.log("tmpdata");
console.log(tmpdata);
let outputPos = Object.keys(tmpdata); // 设置区域,比如表格从A1到F3
let tmpWB = {
    SheetNames: ['sheet'], // 保存的表标题
    Sheets: {
        'sheet': Object.assign({},
            tmpdata, // 内容
            {
                '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
            })
    }
};
let blob = new Blob([this.sTbuff(XLSX.write(tmpWB,
    { bookType: (type || 'xlsx'), bookSST: false, type: 'binary' } // 这里的数据是用来定义导出的格式类型
))], {
    type: this.fileType
}); // 创建二进制对象写入转换好的字节流
var link = document.createElement('a');
document.body.appendChild(link);
link.href = window.URL.createObjectURL(blob);
link.download = fileName;   //下载的文件名,带格式
link.click();
//释放内存
// window.URL.revokeObjectURL(link.href);
window.URL.revokeObjectURL(link.href, 100); // 延时释放
document.body.removeChild(link);

sTbuff字符串转字符流(str参数:string)

// 字符串转字符流
var buff = new ArrayBuffer(str.length)
var view = new Uint8Array(buff)
for (var i = 0; i !== str.length; ++i) {
    view[i] = str.charCodeAt(i) & 0xFF
}
return buff

getCharCol将指定自然数转换为26进制表示(n参数:number) 映射关系[0-25] —> [A-Z]

let s = '';
let m = 0;
while (n > 0) {
  m = n % 26 + 1;
  s = String.fromCharCode(64 + m) + s;
  n = (n - m) / 26;
}
return s

3.importFile导入excel

// 导入excel
this.fullscreenLoading = true;
let files = this.__getVueIns('1579073713062').$refs._op_formUpload_upload.uploadFiles;
if (!files) {
    this.fullscreenLoading = false;
    return;
}
var file = files[0];
const types = file.name.split('.');
const type = types[types.length - 1];
const fileType = ['xlsx', 'xls', 'XLSX', 'XLS'].some(item => item == type);
if (!fileType) {
    this.$message.error('格式错误,请重新上传文件!');
    return;
}
this.readFile(file).then((res)=>{
    let list = res[0];
    console.log('list',list);
    if (list.length <= 1) {
        this.$notify({
            title: '文件内容格式不对或不能为空!',
            type: 'error'
        });
        return;
    }
    let appBody = [];
    for (let i in list) {
        if (i == 0) {
            continue;
        }
        let data = {
            staffNo: list[i][0],
            merchantNo: list[i][2],
            operation: list[i][4]
        }
        appBody.push(data);
    }
});

readFile文件读取(参数:file)

var XLSX = require('xlsx');
const result = [];
return new Promise((resolve) =>{
    const reader = new FileReader();
    reader.onload = function(e) {
    const data = e.target.result;
    const wb = XLSX.read(data, {
        type: 'binary'
    });
    wb.SheetNames.forEach((sheetName) => {
        result.push(
        XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:''})
        /* {
        sheet: XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:''})
        } */
        )
    });
    console.log('result',result);
    resolve(result)
    };
    reader.readAsBinaryString(file.raw)
})

 

参考:https://www.cnblogs.com/J-Luck/p/15066768.htmlhttps://blog.csdn.net/sumimg/article/details/124927392

 

标签:xlsx,vue,const,json,let,file,link,上传
From: https://www.cnblogs.com/ZhaoHS/p/16640205.html

相关文章

  • vue
    1前端发展介绍#HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数......
  • MUI调用照片以及裁剪和图库照片上传到服务器【后端部分Flask+MUI】
    MUI调用照片以及裁剪和图库照片上传到服务器【后端部分】涉及技术:前端:MUI后端:Flask数据库:MongoDB一.MUI后端接受照片1.1主要的py文件先设置固定接受照片路由,用于......
  • Vue+el-select v-model绑定为对象时回显失效的问题探究
    源代码如下:<template><el-selectv-model="media"value-key="mediaId"placeholder="请选择"@change="mediaChange"><el-optionv-for="iteminmedias"......
  • 记录--分享8个非常实用的Vue自定义指令
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在Vue,除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令。它的作用价值在于当......
  • vue框架基础学习
    Vue的快速使用、插值语法、指令系统之文本指令、指令系统之事件指令、指令系统之属性指令......
  • ali-oss multipartUpload 取消上传
    取消上传方法在newOSS()时可以拿到返回的store实列,store.cancel()会将当前进行的上传事件取消。cancel()不生效的原因store.cancel()方法可以取消OSS上传,但实际使用会......
  • java-文件上传
    一、图片上传文件上传一般使用云服务器,常见的云服务器有阿里云,七牛云服务器。这里使用七牛云`publicclassQiniuUtils{publicstaticStringaccessKey="你自......
  • 关于 Vue 中 h() 函数的一些东西
    最近在项目上需要一个信息弹窗,来显示信息。一开始只让它弹出了文字,而且只有一条信息。而给我的需求是多条文字和图片,而后我使用了elementui中的Notification通知组件来......
  • vue中实现当前时间echarts图表时间轴动态的数据
    1<!--!废话不多说,直接看代码吧!-->2<template>3<divclass="">4<divclass="chart"ref="ref_chart"style="width:370px;height:250px;"></......
  • 搭建vue2.0开发环境
    1.安装nodevue的运行是依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/2.查看node版本号打开cmd管理工具,输入node-v命令,查看node版本号,出现版本号说明......