vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件
// 导出
exportData () {
this.$confirm('确认导出XXXXXX?', {
confirmButtonText: '导出',
cancelButtonText: '取消',
type: 'question'
}).then(async () => {
try {
let { data ,headers} = await operateReportExport(Params)//请求数据
this.saveExcelFiles(data, 'xxxxx.xls')//从后端请求的数据处理导出Excel文件
//headers请求参数头
//this. handleExportFile(data, headers)//从后端请求的数据处理导出cvs文件
} catch (e) {}
})
}
导出数据处理
//导出excel文件
saveExcelFiles( data, fileName, blobType = "application/vnd.ms-excel") {
if (!data) {
return;
}
let blob = new Blob([data], {
type: blobType
});
downloadFile(blob, fileName);
}
//导出csv
handleExportFile (stream, header, fileType = 'csv') {
let reader = new FileReader()
reader.onload = e => {
try {
let res = JSON.parse(e.target.result)
if (res.msg) {
Message.error(i18n.t(`${res.code}`))
}
} catch (error) {
let disposition = header['content-disposition']
let fileName = disposition ? disposition.match(/filename=(.*)/)[1] : ''
fileName = fileName ? fileName : `${randomRangeId(14)}${+new Date()}.${fileType}`
downloadFile (stream, fileName)
}
}
try {
reader.readAsText(stream)
} catch (error) {
console.log(error)
}
}
//导出实现
downloadFile (stream, fileName, garbledCode = false) {
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(stream, fileName)
return
}
if (fileName.endsWith('.csv') && garbledCode) stream = '\ufeff' + stream
let url = window.URL.createObjectURL(new Blob([stream]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
link.remove()
}
// 获取num长度的随机id
randomRangeId(num) {
let returnStr = ''
let charStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
for (let i = 0; i < num; i++) {
let index = Math.round(Math.random() * (charStr.length - 1))
returnStr += charStr.substring(index, index + 1)
}
return returnStr
}
vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件相关推荐
- vue 本地xlsx文件下载_vue前端项目中excel文件下载
模仿 https://github.com/PanJiaChen/vue-element-admin/ 的下载 创建文件夹vendor 创建文件 Export2Excel.js 内容: /* esli ...
- h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- 将页面中表格数据导出excel格式的文件(vue)
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- 如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
- 前端javascript 实现导出excel 支持分页
下载地址 链接:https://pan.baidu.com/s/1ce6oxhRMirMRmlSz8L8PLw 提取码:ws7c 版本 v2.0.0 进步 丢弃了jquery操作dom,由于大量耗费 ...
- vue 打开html流_在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
- vue 箭头函数兼容性_前端学习计划之VUE学习(二)
创建一个实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 数据与方法 当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式 ...
- axios vue 回调函数_前端Vue 面试题大全
点蓝色字关注"程序员报刊" 「 学习 新闻 招聘 」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...
最新文章
- PHP解决方案@时间戳与时间日期
- 数据库-聚合函数-max函数
- LiveVideoStackCon2021音视频技术大会北京站Day2
- 万能makefile深入浅出- 第一篇
- 《深入理解Java函数式编程》系列文章
- D - 邂逅明下 HDU - 2897(有点水平的巴什博奕)
- excel营销数据分析宝典 pdf_你见过最漂亮的 Excel 表格什么样?
- 利用知名站点欺骗挂马
- python能用于机械设计吗_为什么人工智能首选Python?因为有很多适用于ML和DL的Python库!...
- kmeans聚类算法python实现_Python实现Kmeans聚类算法
- uni-app - MUMU模拟器模拟 iPad 尺寸开发(分辨率及DPI调整)
- halcon二维码识别
- 软考2022下半年上午题真题和知识点整理
- Linux ubuntu下载deb包的推荐网站
- sap采购申请自动转采购订单_我的SAP运维日常_0021_MM_计划订单转采购申请时绑定凭证类型...
- Codeup-2044:神奇的口袋
- Ubuntu系统下安装Python3
- unity游戏场景设计
- 尚硅谷_springcloud(2020新版) 下载_异界删除浓缩怎么得|原创下载异界仙战游戏一次搞定 异界仙战安卓下载地址最新版整理...
- 金助教——定义互动教学管理新模式
热门文章
- bitShark对Android版本的支持
- 两台服务器安装redis集群_Redis Cluster搭建高可用Redis服务器集群
- python源程序执行的方式是什么执行-python调用可执行文件的方法
- 利用卷积神经网络对脑电图解码及可视化
- 商汤招股书详解:40名教授250+博士3593位工程师,AI收入亚洲第一,一年15亿研发工资支出...
- 传闻要被「降级」的这所211高校,让这位网红教授「救活了」
- 3亿美元,腾讯第三次领投行业AI独角兽明略,这次还有淡马锡领投,快手跟投...
- 活动推荐 | 2019日立「视频分析技术黑客马拉松」报名启动,还有高额奖金等你赢...
- 苹果2项最新专利曝光无人车路线:闭门造车、传感器先行,关注驾乘体验
- 发表论文不用愁,十大技巧治秃头