vue 导出json

已于 2023-02-27 15:49:50 修改
阅读量444 收藏 1
点赞数 1
分类专栏： vue 导出模块 文章标签： vue.js json 前端 Powered by 金山文档
于 2023-02-27 15:46:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51553392/article/details/129243322
版权

安装依赖

 npm i file-saver

核心代码

  import FileSaver from 'file-saver'
  let data = {    //想要导出的json数据
            tname: this.$route.path,
            data: row
          }
          const blob = new Blob([JSON.stringify(data, null, 2)], {
            type: 'application/json'
          })
          FileSaver.saveAs(blob, '文件名')

小七想发言
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考
u012429102的博客
04-28 1970
此文章用于记录经验，方便下次借鉴，为节省时间用于举例的UI也许有点简陋，将就将就…重要的是方法。 1、导出json文件 1.1、安装file-saver 使用npm install file-saver --save安装file-saver 1.2、使用file-saver 进入需要导出json文件的组件，使用file-saver <template> &l...
Vue 导出JSON格式配置文件
StevenYanghahha的博客
09-15 879
Vue 导出JSON格式配置文件
VUE地图经纬度转换
m0_67642259的博客
06-06 125
地图经纬度转换（百度，高德，谷歌，Leaflet）-----因项目需求，要把GPS的经纬度转换GCJ02t经纬度常用地图的经纬度一般为这几种格式：GCJ02、BD09、WGS84(既EPSG:4326)、EPSG:3857(基于墨卡托坐标系)高德、腾讯（使用GCJ02）GCJ-02坐标系，也称火星坐标系，由中国国家测绘局在02年发布，是在GPS坐标（WGS-84坐标系）基础上经加密后而来。谷歌（使用GCJ02和WGS84）谷歌国内版经纬度用的 GCJ02（又名 国测局 或 火星坐标 ）
在vue中将json数据导出为单个json文件或者包含多个json文件的压缩包
qq_44308920的博客
06-16 3802
需求：为了项目数据的可移植性，决定以json文件的方式进行数据移植。对于单个数据项，可能涉及其关联的一系列数据，如根据数据项的id查询出相关联的子项数据，故导出的话希望以单数据项单json文件的方式。但为了方便，又需要批量导出并合并为一个压缩包。（此处只涉及前端导出解决方案）FileSaver | JSZip......
Vue导出Word, JSON
闪现上空篮的博客
03-15 471
vue导出word,json
Vue-element-admin 导出json和导入json文件
从器之道 从一而终
04-25 733
有一个菜单管理的功能，主要用来跟管理后台的菜单对应，方便后台菜单权限控制。每次新加功能菜单都需要开发人员在后台手动输入，在测试环境操作完待发布时又要到生产环境操作一遍，非常繁琐。为了简化操作流程，计划做一个导出再导入的功能，基于适用人群和数据特征，觉得json文件比较适合。开发人员只需要在配置一次，发布时从测试环境导出json文件，再导入到生成即可。或者直接在 package.json 中添加。
vue实现文件流文件导出json
weixin_44523717的博客
03-22 2128
npm install file-saver --save <template> <div class="hello"> <button @click="exportJSON">导出jsonn</button> <button @click="exportText">导出Text</button> </div> </template> <script> import Fil
045：Vue读取本地上传JSON文件，导出JSON文件方法
大剑师兰特的GIS世界
12-10 631
使用vue做项目时候，有时候要上传加载json文件，获取到内容，然后用于分析应用。有的时候需要将一些文件导出来。
vue js导出数组,对象数据为json文件
qq_44871531的博客
03-28 289
let data=[{name:"xxx",value:2}] const blob = new Blob([JSON.stringify(data)]); const fileName = 'xx.json'; //文件名 const link = document.createElement('a'); //不用管,写死 link.href = window.URL.createObjectURL(blob); //不用管写死 link.download = fileNam
Vue导出JSON文件，读取本地上传JSON文件
Principal_Z的博客
08-31 5881
导出JSON文件 // 插件安装 import FileSaver from 'file-saver' import axios from 'axios' 导出代码 const data = JSON.stringify('存放JS数组或者对象') const blob = new Blob([data], { type: 'application/json' }) FileSaver.saveAs(blob, `文件名称.json`) 读取的弹出 读取本地上传JSON文件 // 由于我是 vue项目
vue导入导出json
weixin_45890414的博客
03-11 1824
// 导出选中页面 const exptPageList = data => { if (!data) return; const blob = new Blob([JSON.stringify(data)], { type: 'text/plain;charset=utf-8', }); saveAs(blob, `页面菜单.json`); }; // 导入页面 const fileLoad = () => { const reader = new FileReader();
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
10-16
主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
Vue中导出json【基于file-saver】
05-15 920
下载file-saver： cnpm i -S file-saver 引入： import FileSaver from "file-saver"; 使用： let jsonData = { username: "张三", age: 123 }; let blob = new Blob([JSON.stringify(jsonData)], { type: "application/json", });
Vue使用vue-resource读取本地json文件
qq_37669507的博客
07-29 920
1.npm install vue-resource安装vue-resource 2.在main.js文件配置 import VueResource from 'vue-resource' Vue.use(VueResource) 3.要使用get请求，post请求会404，文件要放在static下 (因为dev-server限制了http的访问，解决办法就是讲json文件放到static文件夹下面，static文件夹没有被限制。) useResource () { this.$http.
Vue在页面输出JSON对象，测试接口可复制使用
章小鱼的博客
08-12 1571
【代码】Vue在页面输出JSON对象，测试接口可复制使用。
Vue中实现生成本地Json文件功能
m0_67790636的博客
09-01 5542
vue生成本地json文件
vue页面中，通过接口获取json返回值，并导出到Excel中；
最新发布
唐诺
06-27 358
vue页面中，通过接口获取json返回值，并导出到Excel中；
mongoVUE 数据的json格式导入导出
布奇小米
09-12 4404
刚开始接触mongodb，以下介绍使用mongoVUE来导入和导出json格式的数据 1、导出 瞬间导出到指定的text文件中，我们用文本编辑器打开预览 2、导入 导入的时候首先我我们要选择导入的表， 点进去之后可以直接写json文本也可以导入,txt文件 不过我们刚刚导出的json格式的txt文件是不能直接导入的，稍作一下修改，（需要的话去掉_id），去掉每个json串之间...
vue 导出 json_to_sheet
08-23
在Vue.js中，你可以使用`json_to_sheet`方法将JSON数据导出为Excel的Sheet。这个方法通常是在使用`xlsx`库时使用的。 首先，你需要安装`xlsx`库。可以通过以下命令使用npm进行安装： ```bash npm install xlsx ``` 然后，在你的Vue组件中，你可以按照以下方式导出JSON数据为Excel的Sheet： ```javascript import { json_to_sheet, utils } from 'xlsx'; export default { methods: { exportToExcel() { // 模拟一些JSON数据 const data = [ { name: 'John', age: 25, city: 'New York' }, { name: 'Jane', age: 30, city: 'San Francisco' }, { name: 'Bob', age: 35, city: 'Los Angeles' }, ]; // 创建一个工作簿 const wb = utils.book_new(); // 将JSON数据转换为Sheet const ws = json_to_sheet(data); // 将Sheet添加到工作簿 utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作簿保存为Excel文件 utils.writeFile(wb, 'excel_file.xlsx'); } } } ``` 在上面的例子中，我们首先导入了`json_to_sheet`和`utils`方法。然后，我们定义了一个`exportToExcel`方法，在这个方法中，我们创建了一个工作簿并将JSON数据转换为Sheet。最后，我们将工作簿保存为名为"excel_file.xlsx"的Excel文件。 你可以根据你自己的需求修改和调整这个例子。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小七想发言

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值