vue2 使用x2js json转换成xml
安装:
在项目终端运行以下命令
cnpm install x2js --save
引用:
// 引入模块
import x2js from 'x2js'
全部代码:
<template>
<el-button type="primary" @click="exportExcel">导出</el-button>
</template> <script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
data() {
return {
testdata: [
{
"noticeId":345646,
"satName":"ZOHREH-2",
"country":"IRN",
"freqMin":456.0,
"freqMax":456.0,
"beamInfoList":
[
{
"beamName":"RS49",
"freqMin":3456.0,
"freqMax":654.0,
"groupInfoList":
[
{
"groupId":567.34,
"freqMin":768.0,
"freqMax":678.0,
"pwrMax":1.0
},
{
"groupId":10600362,
"freqMin":11450.0,
"freqMax":11700.0,
"pwrMax":2.0
},
{
"groupId":10600363,
"freqMin":14000.0,
"freqMax":14500.0,
"pwrMax":3.0
}
]
},
]
}]
}
},
methods: {
exportExcel() {
let x2js = new X2js();
let groupdata = { doc: this.testdata };
//groupdata必须只有一个跟节点noticeData不然导出xml时会报错
// let obj = {
// doc: groupdata,
// };
// 调用x2js 将我们的json数据转换成xml数据格式
console.log(x2js);
let xml = x2js.js2xml(groupdata);
xml = `<?xml version="1.0" ?>` + xml;
console.log(xml);
// 下面就是我们想要的xml文件的数据格式了
// 这里会生成一个url
let url = window.URL.createObjectURL(
new Blob([xml], { type: "text/xml;charset=utf-8" })
);
// 然后就可以创建a标签 最后下载下来了
let link = document.createElement("a");
// 不显示链接
link.style.display = "none";
link.href = url;
// 设置链接属性
link.setAttribute("download", "导出");
//点击链接
document.body.appendChild(link);
link.click();
// 删除连接
document.body.removeChild(link);
},
})
vue2 使用x2js json转换成xml的更多相关文章
- Java对象转换成xml对象和Java对象转换成JSON对象
1.把Java对象转换成JSON对象 apache提供的json-lib小工具,它可以方便的使用Java语言来创建JSON字符串.也可以把JavaBean转换成JSON字符串. json-lib的核心 ...
- 怎样用Google APIs和Google的应用系统进行集成(5)----怎样把Google Tasks的JSON Schema转换成XML的Schema(XSD)?
前面说了一些Google API的介绍,可是在实际的开发其中,我们可能须要把Google RESTful API返回的JSON数据转换成XML数据输入到第三方系统,这在企业应用集成里面很的常见. 那么 ...
- 怎样用Google APIs和Google的应用系统进行集成(8)----怎样把Google Blogger(博客)的JSON Schema转换成XML的Schema(XSD)?
在Google RESTFul API中,Google Blogger API(Google博客API)应该和我们的生活离得近期:由于差点儿非常多人每天都在看博客,都在写博客,都听说过博客.在前面的G ...
- json转换成对象
在json转换成对象时,json的key会与java 类的字段一一对应.如果没有映射上的java字段会在该数据类型上填充默认值,如int 0,String null 等. 没有映射的json key在 ...
- android XMl 解析神奇xstream 五: 把复杂对象转换成 xml ,并写入SD卡中的xml文件
前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...
- android XMl 解析神奇xstream 三: 把复杂对象转换成 xml
前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...
- 【Json】Jackson将json转换成泛型List
Jackson将json转换成泛型List 获取泛型类型 /** * 获取泛型类型 * * @return */ protected Class<T> getGenericsType() ...
- C#中利用LINQ to XML与反射把任意类型的泛型集合转换成XML格式字符串
在工作中,如果需要跟XML打交道,难免会遇到需要把一个类型集合转换成XML格式的情况.之前的方法比较笨拙,需要给不同的类型,各自写一个转换的函数.但是后来接触反射后,就知道可以利用反射去读取一个类型的 ...
- json转换成dart类 JSON to Dart
json_to_dart的使用 如果我们得到一个特别复杂的JSON,有时候会无从下手开始写Model,这时候就可以使用一些辅助工具.我认为json_to_dart是比较好用的一个.它可以直接把json ...
- java中String转换成json,json转换成String
前置添加pom <!-- 配置gson --> <dependency> <groupId>com.google.code.gson</groupId> ...
随机推荐
- 学习ASP.NET Core Blazor编程系列十五——查询
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 10-排序6 Sort with Swap(0, i) (25point(s))
10-排序6 Sort with Swap(0, i) (25point(s)) Given any permutation of the numbers {0, 1, 2,..., N−1}, it ...
- ClickHouse入门教程
目录 什么是ClickHouse? OLAP场景的关键特征 列式数据库更适合OLAP场景的原因 输入/输出 CPU ClickHouse的特性 真正的列式数据库管理系统 数据压缩 数据的磁盘存储 多核 ...
- vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求
最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把自己卷死了(没有办法,项目经 ...
- python 之将xmind转为excel用例文件
1.xmind文件模板如下所示(最后一个子级为预置条件) 2.excel用例模板 3.获取xmind文件数据并转成字典形式 from xmindparser import xmind_to_dict ...
- 【转载】SQL SERVER 将多行数据合并成一行
昨天遇到一个SQL Server的问题:需要写一个储存过程来处理几个表中的数据,最后问题出在我想将一个表的一个列的多行内容拼接成一行 比如表中有两列数据 : ep_classes ep_name A ...
- 图文并茂的学习笔记--微信小程序自定义tabbar
我发现自带的那个tabbar不可以修改样式,没得搞啊,这不行,要改 首先,我们看文档,地址在下面 https://developers.weixin.qq.com/miniprogram/dev/fr ...
- ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用
表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~ 表格页面文件.html <h1>正常表格</h1> <nz-table #colSpanTable [nz ...
- vscode快速删除空白行方法
1.快速打开替换界面,在Find界面输入^\s*(?=\r?$)\n 2.Alt+R选择Use Regular Expression(Alt+R)即正则表达式模式: 3.选择Replace All(C ...
- Flutter框架渲染流程与使用
Flutter简述 Flutter是一个UI SDK, 可以进行移动端(iOS, Android),Web端, 桌面,它是一个跨平台解决方法. Flutter的特点:美观,快速,高效,开放. 美观:F ...