首页 > 其他分享 >VUE 2项目使用vue-json-excel导出数据

VUE 2项目使用vue-json-excel导出数据

时间:2023-07-05 15:35:56浏览次数:45  
标签:VUE excel 导出 json vue 使用

记录一下后端返回的json数据转成excel导出

这里外面使用的是 vue-json-excel

1.安装包

npm install vue-json-excel

2.组件中使用

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
</download-excel>

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

json_data就是后端返回的json 数据

具体还有多个参数,详细用法可以参考GitHub官方说明
vue3的话可以使用 vue-json-excel3,具体使用可参考GitHub官方说明

标签:VUE,excel,导出,json,vue,使用
From: https://www.cnblogs.com/qingheshiguang/p/17528655.html

相关文章

  • 09: vue3 组件嵌套关系
    组件嵌套关系组件允许我们将UI划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构:这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。创建组件及引用关系......
  • Java批量操作Excel文件实践
    摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言|问题背景在操作Excel的场景中,通常会有一些针对Excel的批量操作,批量的意思一般有两种:对批量的Excel文件进行操作。如导入多个Excel......
  • vue-treeselect 被 overflow 遮挡
    场景在一个内容区域设置了overflow纵向滚动的对话框中,内部的vue-treeselect组件下拉框选项被遮挡了。解决办法给vue-treeselect设置appendToBody和z-index属性。注意事项设置了appendToBody后,下拉框选项的字号会变大。为了与原来的字号相匹配,需要修改样式。找......
  • 在asp.net core中使用vue3+vite(起)
    前言一开始是一个自用的应用,原本是用razor写的。最近有了点新想法,加点新功能,但是我接触的项目基本都是vue+api的前后端分离,用这razor写的是真不习惯,最后决定还是用习惯的vue重写。之前尝试过在.netcore里使用vue2+webpack,毕竟实际上就是把.vue翻译成了.js来用,一个站点就能跑。......
  • 第八篇 - Vue路由跳转步骤
    第六篇讲了将SpringBoot和Vue项目结合起来,实现了使用Vue访问SpringBoot的API。这一篇我们介绍当访问API成功后跳转到新的Vue页面怎么处理。参考链接:https://zhuanlan.zhihu.com/p/468467076第一步:首先新建一个Vue页面 jump1test.vue/*eslint-disable*/<template><div......
  • 08:vue3 组件基础
    定义一个组件在components文件夹下新建MyComponent.vue组件 写入下面代码1<script>2exportdefault{3data(){4return{5count:06}7}8}9</script>1011<template>12<button@click="count++">我被点击了{......
  • 解决vue中mapbox地图显示一半的问题
    解决vue中mapbox地图显示一半的问题问题描述:在vue中创建mapbox地图,地图只显示一般,查看浏览器开发者工具。发现将canvas.mapboxgl-canvas的position:absolute去掉就解决了。代码修改:获取到canvas.mapboxgl-canvas,并修改其position样式就ok修改前代码:<template><main......
  • 通过 openpyxl 操作 excel 表格
    博客地址:https://www.cnblogs.com/zylyehuo/STEP1:导入相关库importosfromopenpyxlimportload_workbookSTEP2:构建存放路径,将上传文件下载到服务器该路径下excel_stus=request.FILES.get("excel_stus")#获取文件path=os.path.join("media","files",excel_s......
  • vue项目动态菜单import运行报错【转】
    Modulebuildfailed(from./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):TypeError:Cannotreadproperty‘range’ofnull 1.从git拉取的项目,下载依赖后就报Modulebuildfailed(from./node_modules/@vue/cli-plugin-eslint/node_modu......
  • vue项目报错:Node.js v18.16.1 error Command failed with exit code 1.
    原因:把node升级到了最新的长期支持版18.16.1,结果运行vue项目启动失败,报错如下:试了各种办法都解决不了,后面只能把node降级到16.20.1运行项目又可以启动了......