vue+element_ui纯前端下载csv文件

纯前端实现csv格式文件下载，也可以从后端获取数据来实现。

<template><div><el-button type="mini" @click="handleDownload()">下载</el-button></div>
</template>
<script>
export default {data () {},methods: {handleDownload () {// 未完成let thiz = thislet loading = thiz.$loading({lock: true,text: '下载中，请稍候...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})// values可以从后端获取数据var values = ['aaa','bbb','ccc','ddd','eee']// 列标题，逗号隔开，每一个逗号就是隔开一个单元格let str = ``// 增加\t为了不让表格显示科学计数法或者其他格式for (let i = 0; i < values.length; i++) {str += values[i] + ','}// 一个回车（'\n'）表示一行数据str += '\n'// encodeURIComponent解决中文乱码let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)// 通过创建a标签实现let link = document.createElement('a')link.href = uri// 对下载的文件命名link.download = obj.dataSubjectId + '.csv'document.body.appendChild(link)link.click()document.body.removeChild(link)loading.close()}}
}
</script>
<style lang="scss" scoped>
</style>

vue+element_ui纯前端下载csv文件相关推荐

纯前端下载 csv 格式文件
纯前端下载 csv 文件 table 数据 data() {return {header: [{_id: '01',label: '姓名',prop: 'name',},{_id: '02',labe ...
纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案参考文章: (1)纯前端下载pdf链接文件,而不是打开预览的解决方案 (2)https://www.cnblogs.com/jackson-yqj/ ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
【web】【django】datatable的button扩展实现纯前端下载和copy指定列内容，以及django的HTTPResponse实现下载功能
Table of Contents 功能需求描述一使用Datatables实现纯前端下载.拷贝二 query db 实现下载(django) 功能需求描述用户需要以网页为媒介,从DB里拉取一些 ...
前端下载静态文件及动态文件
前端下载静态文件及动态文件静态文件动态文件前端后端静态文件 <a href="doc/use_document.pdf" download="使用文档.p ...
vue实现纯前端导入与解析excel表格文件，导出Excel
一.安装相关依赖 npm install --save xlsx file-saver 二.使用 import * as XLSX from 'xlsx/xlsx.mjs' const FileSav ...
vue纯前端下载表格
一般我们做后台管理会遇到这样的需求:页面上的表格,需要纯前端技术来完成.不涉及接口对接.不涉及后端,就是你在页面上展示的表格是什么样,就要下载什么样的表格excel,方便人观察,废话不多说,上代码如 ...
vue中纯前端实现滑动图片验证的方式
Hello,大家好呀~ 众所周知,滑动图片验证一直是各类网站登录和注册的一种校验方式,是用来防止有人恶意使用脚本批量进行操作从而设置的一种安全保护方式. 一般而言,这种滑动图片验证是可以通过后端配合完 ...
txt格式转换成prg_Advanced CSV Converter v6.69下载(csv文件转换工具)
CSV文件是一个纯文本文件,有的时候,由于使用需求,需要将CSV转换为其他的格式使用,在这里,小编向大家推荐这款Advanced CSV Converter转换工具,它支持将CSV格式的文件转换成DB ...
Django从理论到实战(part45)--下载CSV文件
学习笔记,仅供参考,有错必纠参考自:Django打造大型企业官网–Huang Y: 文章目录 CSV文件生成小的CSV文件将`csv`文件定义成模板生成大的CSV文件 StreamingHtt ...

vue+element_ui纯前端下载csv文件

vue+element_ui纯前端下载csv文件相关推荐

最新文章

热门文章