vue.js 导出JSON
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的更多相关文章
- FileSaver.js导出json文件和文本
最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时 ...
- [转]纯js导出json到excel(支持chrome)
转自:http://blog.csdn.net/educast/article/details/52775559 function JSONToExcelConvertor(JSONData, Fil ...
- 第1章-初识Vue.js
一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...
- 基于 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 时代,包括其插件在需要时就引 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- js导出到word、json、excel、csv
tableExport.js ///*The MIT License (MIT) //Copyright (c) 2014 https://github.com/kayalshri/ //Permis ...
- Vue.js Extension Pack 和 jsconfig.json 可以定位跳转到@开头的路径等自定义路径
Vue.js Extension Pack | vsCode插件 可以定位跳转到@开头的路径等自定义路径 webpack自定义别名后,VScode路径提示问题 //tsconfig.json 或者 j ...
- vue.js纯前端处理如何将后台返回来的csv数据导出成csv文件
需要实现一个下载csv文件的功能,但后台没有对这个下载文件进行处理,而是将csv数据传给前台而已,需要前台做一下处理. 这是按钮的代码: <a> <el-button size=&q ...
随机推荐
- [hadoop](1) MapReduce:ChainMapper
前言 本章主要讲述的是对于hadoop生态系统中,MapReduce写的ChainMapper的学习.MapReduce是hadoop集群数据处理的默认框架.而对于数据集中所有的数据必然有一些不友好的 ...
- [CSP-S模拟测试]:Rectangle(模拟+树状数组)
题目描述 平面上有$n$个点,第$i$个点的坐标为$X_i,Y_i$.对于其中的一个非空点集$S$,定义$f(S)$为一个最小矩形,满足:$\bullet$覆盖$S$中所有的点(在边界上也算覆盖):$ ...
- SecondModel 实现类
package com.test.mvp.mvpdemo.mvp.v6.model; import com.test.mvp.mvpdemo.mvp.v6.SecondContract;import ...
- 【MEAN Web开发】CentOS 7 安装MongoDB 3.2.3
偶然得了一本书,AmosQ.Haviv 所著 <MEAN Web开发>.起初并不知道这啥东西,看了下目录发现正好有讲MongoDB而已.当时的项目正好需要做MongoDB的内容,之后这书就 ...
- idhttpserver 下载文件
procedure TForm30.IdHTTPServer1CommandGet(AContext: TIdContext; ARequestInfo: TIdHTTPRequestInfo; AR ...
- DELPHI 全局变量和局部变量的区别
全局变量: 如果我们在应用程序一个单元中的interface关键字和implementation关键字之间的区域,定义一个全局变量,假如这个单元在别的地方被引用,那么这个单元的全 局变量能够在别的地方 ...
- ES6中set的用法回顾
ES6中的set类似一个数组,但是其中的值都是唯一的,Set本身是一个构造函数,用来生成 Set 数据结构. set函数可以接受一个数组作为参数,用来初始化: const set = new Set( ...
- time in china
https://www.timeanddate.com/worldclock/china
- PS总结
1.ALT:取消工具选择状态2. photoshopcs6 出现因为智能对象不能直接进行编辑 解决方案:右击---图层名---栅格化图层3.Shift+F5:填充画布颜色 4.PS不能变换路径, ...
- C# 栈=>随时读取栈中最小值
//原理:利用两个栈,一个记录最小值,一个记录数据. using System; using System.Collections.Generic; using System.Linq; using ...