// 导出

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. 【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建
  2. ETL MySQL in Oracle ODI 12c
  3. windows7与虚拟机fedora 9.0文件共享
  4. SQL Server扩展事件(Extended Events)-- 将现有 SQL 跟踪脚本转换为扩展事件会话
  5. 朴实!简单!依你所好,MySQL排序查询ORDER BY
  6. Selenium自动化获取WebSocket信息
  7. ELK6.0部署:Elasticsearch+Logstash+Kibana搭建分布式日志平台
  8. C语言---输出三角形字符阵列
  9. 公私钥,数字证书,https
  10. python及环境安装_一、什么是python及开发环境安装
  11. 一个python停车管理系统_Python简易版的停车管理系统
  12. LeetCode Interleaving String
  13. 软件测试综合笔试题目及参考答案
  14. java调用webservice接口 几种方法
  15. 乐动ld06激光雷达sdk改bug记录分享
  16. python比较火的培训机构
  17. PTA 校选拔 7-10 宇航员的寻宝图(BFS)
  18. 洛谷 P2962 [USACO09NOV]灯Lights
  19. 最新抖音X-Bogus、msToken、_signature、ttwid、webid分析(2023-04-12)
  20. Apache Zeppelin:可能是开源届最好的Flink开发平台

热门文章

  1. 端口偷窃(Port Stealing)技术
  2. Xamarin.iOS项目提示error MSB3174:”TargetFrameworkVersion”的值无效
  3. python os模块是什么_python常见模块之os模块
  4. python表示不服怎么办_10万+的短视频被批量生产了,Python表示不服!
  5. python加颜色_Python 给屏幕打印信息加上颜色的实现方法
  6. 2个点马氏距离计算实例_数据分析基础:距离度量方式(欧式距离、马氏距离、曼哈顿距离)...
  7. 首位植入脑机接口的患者通过Twitter发布信息
  8. UE4蓝图中的AI行为树功能使用经验指南
  9. IPython 8.0大版本更新:Debug报错提示更清晰,加入自动代码补全
  10. 扫地机器人能有多硬核?好家伙自动驾驶、激光扫描、NLP这些硬科技全上了,科沃斯:技术创新才能打破行业内卷...