cnpm install file-saver --save
<template>
<div class="hello">
<button @click="exportJSON">导出jsonn</button>
<button @click="exportText">导出Text</button>
</div>
</template> <script>
import FileSaver from 'file-saver'
export default {
data () {
return {
// 待导出的json数据
CfgInfo: {
CAN: {
Chn: 0,
name: 'CAN通道'
},
LIN: {
Chn: 1,
name: 'LIN通道'
}
}
}
},
methods: {
exportJSON () {
// 将json转换成字符串
const data = JSON.stringify(this.CfgInfo)
const blob = new Blob([data], {type: ''})
// const textStr = 'aaaaa,bbbbbbb,cccccc'
FileSaver.saveAs(blob, 'hahaha.txt')
},
exportText () {
const textStr = 'aaaaa,bbbbbbb,cccccc'
FileSaver.saveAs(textStr, 'a.txt')
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

vue.js 导出JSON的更多相关文章

  1. FileSaver.js导出json文件和文本

    最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时 ...

  2. [转]纯js导出json到excel(支持chrome)

    转自:http://blog.csdn.net/educast/article/details/52775559 function JSONToExcelConvertor(JSONData, Fil ...

  3. 第1章-初识Vue.js

    一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...

  4. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  5. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  6. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  7. js导出到word、json、excel、csv

    tableExport.js ///*The MIT License (MIT) //Copyright (c) 2014 https://github.com/kayalshri/ //Permis ...

  8. Vue.js Extension Pack 和 jsconfig.json 可以定位跳转到@开头的路径等自定义路径

    Vue.js Extension Pack | vsCode插件 可以定位跳转到@开头的路径等自定义路径 webpack自定义别名后,VScode路径提示问题 //tsconfig.json 或者 j ...

  9. vue.js纯前端处理如何将后台返回来的csv数据导出成csv文件

    需要实现一个下载csv文件的功能,但后台没有对这个下载文件进行处理,而是将csv数据传给前台而已,需要前台做一下处理. 这是按钮的代码: <a> <el-button size=&q ...

随机推荐

  1. [CSP-S模拟测试]:chess(搜索+最短路)

    题目描述 $pig$在下象棋的时候特别喜欢用马,他总是计算着自己的马还需要几步才能吃掉对方的帅,以及方案数的个数,当然$pig$很笨,所以他只能求助于你.我们假设在$n\times m$的棋盘上,$p ...

  2. ARP(Address Resolution Protocol)地址解析协议初识

    ARP址解析协议是根据IP地址获取物理地址的一个TCP/IP协议.它工作在OSI七层模型的中第二层——数据链路层. 使用ARP地址解析协议,可根据网络层IP数据包包头中的IP地址信息解析出目标硬件地址 ...

  3. php面试专题---19、MySQL高可扩展和高可用考点

    php面试专题---19.MySQL高可扩展和高可用考点 一.总结 一句话总结: 要区别分区和分库分表,分区的话对用户是透明的,分库分表的话需要程序员做点事情,主从数据库同步的话借助的是二进制日志 1 ...

  4. 相同name,取最小的id的值,mysql根据相同字段 更新其它字段

    id name info1 a 1232 a 2353 a 1244 b 125 b 987相同name,取最小的id的值id name info1 a 1232 a 1233 a 1234 b 12 ...

  5. Centos7.2命令安装图形化界面

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/liang_operations/arti ...

  6. Mac版-python环境配置(一):Python下载安装

    Mac OS X系统自带python,可以在终端输入python查看版本[输入exit()即可退出],如下: 从上图中可以看到,mac自带python 2.7.10,版本相对较低.现在python已升 ...

  7. C++ bitset的使用

    bitset 一般代替 bool 数组使用,常用于优化空间,因为 bitset 中一个元素只占 1 bit. bitset 的大小在定义使就需要确定.如果想要不定长的 bitset,就需要使用 vec ...

  8. poj2431Expedition

    A group of cows grabbed a truck and ventured on an expedition deep into the jungle. Being rather poo ...

  9. Item-Based Collaborative Recommender System

    与User-Based Collaborative Recommender System认为‘类似的用户会对同一个item给出类似的打分’不同,Item-Based Collaborative Rec ...

  10. 第一次工作->笔记:在phpstrom2019上搭建phpunit单元测试环境,php环境使用docker

    前言:公司大佬让我开发一个工具,并合并到他的工具包中,使用的是github 说明:这里的php环境使用的是laradock.感兴趣的道友自行查找. 工具:php.phpstrom.phpunit.do ...