// 导出

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文件相关推荐

  1. vue 本地xlsx文件下载_vue前端项目中excel文件下载

    模仿 https://github.com/PanJiaChen/vue-element-admin/ 的下载 创建文件夹vendor 创建文件 Export2Excel.js 内容: /* esli ...

  2. h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...

    前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...

  3. 将页面中表格数据导出excel格式的文件(vue)

    近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...

  4. 如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

    前言 最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...

  5. 前端javascript 实现导出excel 支持分页

    下载地址 链接:https://pan.baidu.com/s/1ce6oxhRMirMRmlSz8L8PLw  提取码:ws7c 版本 v2.0.0 进步 丢弃了jquery操作dom,由于大量耗费 ...

  6. vue 打开html流_在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  7. vue验证整数_前端Vue中常用rules校验规则

    前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...

  8. vue 箭头函数兼容性_前端学习计划之VUE学习(二)

    创建一个实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 数据与方法 当Vue实例按照上述方式被创建时,Vue的响应式系统中就加入了data对象,在使用中可以直接通过属性的调用方式 ...

  9. axios vue 回调函数_前端Vue 面试题大全

    点蓝色字关注"程序员报刊" 「  学习 新闻 招聘 」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...

最新文章

  1. PHP解决方案@时间戳与时间日期
  2. 数据库-聚合函数-max函数
  3. LiveVideoStackCon2021音视频技术大会北京站Day2
  4. 万能makefile深入浅出- 第一篇
  5. 《深入理解Java函数式编程》系列文章
  6. D - 邂逅明下 HDU - 2897(有点水平的巴什博奕)
  7. excel营销数据分析宝典 pdf_你见过最漂亮的 Excel 表格什么样?
  8. 利用知名站点欺骗挂马
  9. python能用于机械设计吗_为什么人工智能首选Python?因为有很多适用于ML和DL的Python库!...
  10. kmeans聚类算法python实现_Python实现Kmeans聚类算法
  11. uni-app - MUMU模拟器模拟 iPad 尺寸开发(分辨率及DPI调整)
  12. halcon二维码识别
  13. 软考2022下半年上午题真题和知识点整理
  14. Linux ubuntu下载deb包的推荐网站
  15. sap采购申请自动转采购订单_我的SAP运维日常_0021_MM_计划订单转采购申请时绑定凭证类型...
  16. Codeup-2044:神奇的口袋
  17. Ubuntu系统下安装Python3
  18. unity游戏场景设计
  19. 尚硅谷_springcloud(2020新版) 下载_异界删除浓缩怎么得|原创下载异界仙战游戏一次搞定 异界仙战安卓下载地址最新版整理...
  20. 金助教——定义互动教学管理新模式

热门文章

  1. bitShark对Android版本的支持
  2. 两台服务器安装redis集群_Redis Cluster搭建高可用Redis服务器集群
  3. python源程序执行的方式是什么执行-python调用可执行文件的方法
  4. 利用卷积神经网络对脑电图解码及可视化
  5. 商汤招股书详解:40名教授250+博士3593位工程师,AI收入亚洲第一,一年15亿研发工资支出...
  6. 传闻要被「降级」的这所211高校,让这位网红教授「救活了」
  7. 3亿美元,腾讯第三次领投行业AI独角兽明略,这次还有淡马锡领投,快手跟投...
  8. 活动推荐 | 2019日立「视频分析技术黑客马拉松」报名启动,还有高额奖金等你赢...
  9. 苹果2项最新专利曝光无人车路线:闭门造车、传感器先行,关注驾乘体验
  10. 发表论文不用愁,十大技巧治秃头