安装:

在项目终端运行以下命令

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的更多相关文章

  1. Java对象转换成xml对象和Java对象转换成JSON对象

    1.把Java对象转换成JSON对象 apache提供的json-lib小工具,它可以方便的使用Java语言来创建JSON字符串.也可以把JavaBean转换成JSON字符串. json-lib的核心 ...

  2. 怎样用Google APIs和Google的应用系统进行集成(5)----怎样把Google Tasks的JSON Schema转换成XML的Schema(XSD)?

    前面说了一些Google API的介绍,可是在实际的开发其中,我们可能须要把Google RESTful API返回的JSON数据转换成XML数据输入到第三方系统,这在企业应用集成里面很的常见. 那么 ...

  3. 怎样用Google APIs和Google的应用系统进行集成(8)----怎样把Google Blogger(博客)的JSON Schema转换成XML的Schema(XSD)?

    在Google RESTFul API中,Google Blogger API(Google博客API)应该和我们的生活离得近期:由于差点儿非常多人每天都在看博客,都在写博客,都听说过博客.在前面的G ...

  4. json转换成对象

    在json转换成对象时,json的key会与java 类的字段一一对应.如果没有映射上的java字段会在该数据类型上填充默认值,如int 0,String null 等. 没有映射的json key在 ...

  5. android XMl 解析神奇xstream 五: 把复杂对象转换成 xml ,并写入SD卡中的xml文件

    前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...

  6. android XMl 解析神奇xstream 三: 把复杂对象转换成 xml

    前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...

  7. 【Json】Jackson将json转换成泛型List

    Jackson将json转换成泛型List 获取泛型类型 /** * 获取泛型类型 * * @return */ protected Class<T> getGenericsType() ...

  8. C#中利用LINQ to XML与反射把任意类型的泛型集合转换成XML格式字符串

    在工作中,如果需要跟XML打交道,难免会遇到需要把一个类型集合转换成XML格式的情况.之前的方法比较笨拙,需要给不同的类型,各自写一个转换的函数.但是后来接触反射后,就知道可以利用反射去读取一个类型的 ...

  9. json转换成dart类 JSON to Dart

    json_to_dart的使用 如果我们得到一个特别复杂的JSON,有时候会无从下手开始写Model,这时候就可以使用一些辅助工具.我认为json_to_dart是比较好用的一个.它可以直接把json ...

  10. java中String转换成json,json转换成String

    前置添加pom <!-- 配置gson --> <dependency> <groupId>com.google.code.gson</groupId> ...

随机推荐

  1. websockets的原理

    一.应用场景 http 协议 客户端发起请求的时候才会返回内容,如果要处理类似于聊天室的应用,需要客户端不间断的发起请求(轮询),非常占用服务器的性能.所以websocket出现了. 二.ws(wss ...

  2. 【机器学习】李宏毅——Domain Adaptation(领域自适应)

    在前面介绍的模型中,一般我们都会假设训练资料和测试资料符合相同的分布,这样模型才能够有较好的效果.而如果训练资料和测试资料是来自于不同的分布,这样就会让模型在测试集上的效果很差,这种问题称为Domai ...

  3. 防微杜渐,未雨绸缪,百度网盘(百度云盘)接口API自动化备份上传以及开源发布,基于Golang1.18

    奉行长期主义的开发者都有一个共识:对于服务器来说,数据备份非常重要,因为服务器上的数据通常是无价的,如果丢失了这些数据,可能会导致严重的后果,伴随云时代的发展,备份技术也让千行百业看到了其" ...

  4. [Leetcode]环形链表 II

    题目 代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * Li ...

  5. LRU 缓存

    力扣题目 146. LRU 缓存 实现 LRU 缓存需要用到哈希链表 LinkedHashMap. LinkedHashMap 是由哈希表和双链表结合而成的,它的结构如下所示. 用自带的 Linked ...

  6. 创建a标签使用get请求下载文件

    创建a标签使用get请求下载文件 let url = `${BaseUrl.path}/aa/bb/cc?no=${this.sqcode}&pae=${this.wlName}&as ...

  7. WPF开发经验-实现一种三轴机械手控件

    一 引入 考虑实现一种三轴机器人控件. 三轴机器人用来将某种工件从一个位置运送到另一个位置. 其X轴为手臂轴,可以正向和反向运动,它处于末端,直接接触工件: 其T轴为旋转轴,可以对手臂进行旋转: 其Z ...

  8. ADC-单通道DMA到多通道DMA ADC采集修改事项

    1. 使能通道IO,因为从单通道到多通道,需要添加规则转换通道数,故需要使能扫描模式,否则只能扫描第一个通道: 2. DMA模式配置需修改为循环传输模式,否则只转换一次: 3. 开启ADC规则转换通道 ...

  9. 使用Ajax跨域实现百度搜索功能

    上图 实现过程 1. 在百度上随便搜索一个内容 2. 在Network中找到一个地址右击 copy 然后 Copy link address 3. 将地址保存起来,取出中间有用的部分作为url属性的值 ...

  10. 【学习日志】Cglib动态代理和JDK动态代理的对比

      Cglib JDK Proxy 实现方式 生成被代理类的子类 通过被代理类实现的接口+反射 速度 慢(曾经快于JDK Proxy,但JDK Proxy几次迭代后逐渐落后) 快 限制 被代理类不能是 ...