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 判断已知对象类 ...
最新文章
- 【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建
- ETL MySQL in Oracle ODI 12c
- windows7与虚拟机fedora 9.0文件共享
- SQL Server扩展事件(Extended Events)-- 将现有 SQL 跟踪脚本转换为扩展事件会话
- 朴实!简单!依你所好,MySQL排序查询ORDER BY
- Selenium自动化获取WebSocket信息
- ELK6.0部署:Elasticsearch+Logstash+Kibana搭建分布式日志平台
- C语言---输出三角形字符阵列
- 公私钥,数字证书,https
- python及环境安装_一、什么是python及开发环境安装
- 一个python停车管理系统_Python简易版的停车管理系统
- LeetCode Interleaving String
- 软件测试综合笔试题目及参考答案
- java调用webservice接口 几种方法
- 乐动ld06激光雷达sdk改bug记录分享
- python比较火的培训机构
- PTA 校选拔 7-10 宇航员的寻宝图(BFS)
- 洛谷 P2962 [USACO09NOV]灯Lights
- 最新抖音X-Bogus、msToken、_signature、ttwid、webid分析(2023-04-12)
- Apache Zeppelin:可能是开源届最好的Flink开发平台
热门文章
- 端口偷窃(Port Stealing)技术
- Xamarin.iOS项目提示error MSB3174:”TargetFrameworkVersion”的值无效
- python os模块是什么_python常见模块之os模块
- python表示不服怎么办_10万+的短视频被批量生产了,Python表示不服!
- python加颜色_Python 给屏幕打印信息加上颜色的实现方法
- 2个点马氏距离计算实例_数据分析基础:距离度量方式(欧式距离、马氏距离、曼哈顿距离)...
- 首位植入脑机接口的患者通过Twitter发布信息
- UE4蓝图中的AI行为树功能使用经验指南
- IPython 8.0大版本更新:Debug报错提示更清晰,加入自动代码补全
- 扫地机器人能有多硬核?好家伙自动驾驶、激光扫描、NLP这些硬科技全上了,科沃斯:技术创新才能打破行业内卷...