Vue实现导出xml

1.环境要求

安装x2js模块

在项目终端运行以下命令

cnpm install x2js --save

在main.js配置文件中引入模块,并且全局挂载

// 引入模块
import x2js from 'x2js'

const app = createApp(App)
// 全局挂载 x2js
app.config.globalProperties.$x2js = new x2js()

2.将json文件导出为xml

//点击按钮触发该按钮 
exportXml(){
    //需要导出的json文件
      let obj = {
        Info:this.testdata,
      };
      // 调用$x2js 将我们的json数据转换成xml数据格式
      let xml = this.$x2js.js2xml(obj);
      // 下面就是我们想要的xml文件的数据格式了
      // 这里会生成一个url
      let url = window.URL.createObjectURL(
          new Blob([xml], {type: "text/xml"})
      );
      // 然后就可以创建a标签 最后下载下来了
      let link = document.createElement("a");
      // 不显示链接
      link.style.display = "none";
      link.href = url;
      // 设置链接属性
      link.setAttribute("download", "自定义文件名字");
      //点击链接
      document.body.appendChild(link);
      link.click();
    },

3.最终效果

最终效果图.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。