vue.js3:解析xml (x2js@3.4.3 / vue@3.2.37)

一，安装x2js库

1,x2js库的地址:

https://github.com/x2js/x2js

2,安装:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm install --save x2js
 
added 1 package in 3s

3,查看已安装库的版本

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list x2js
imgtouch@0.1.0 /data/vue/imgtouch
└── x2js@3.4.3

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码

<template>
<div>
  <button @click="parse">解析</button>
</div>
</template>

<script>
import {ref} from "vue"
export default {
  name: "XmlParse",
  setup() {
      //需要解析的xml字串
      let str = `<x:xmpmeta xmlns:x="adobe:ns:meta/">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about="" xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
xmlns:Iptc4xmpCore="http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/"
xmlns:GettyImagesGIFT="http://xmp.gettyimages.com/gift/1.0/"
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:plus="http://ns.useplus.org/ldf/xmp/1.0/"
xmlns:iptcExt="http://iptc.org/std/Iptc4xmpExt/2008-02-29/" xmlns:xmpRights="http://ns.adobe.com/xap/1.0/rights/"
dc:Rights="2022 Getty Images" photoshop:Credit="Getty Images for Copenhagen Fashion Summit"
GettyImagesGIFT:AssetID="1401700937"
xmpRights:WebStatement="https://www.gettyimages.com/eula?utm_medium=organic&amp;utm_source=google&amp;utm_campaign=iptcurl" >
<dc:creator><rdf:Seq><rdf:li>Lars Ronbog</rdf:li></rdf:Seq>
</dc:creator><dc:description><rdf:Alt>
<rdf:li xml:lang="x-default">COPENHAGEN, DENMARK - JUNE 08:  Moderator Peder Michael Pruzan-Jorgensen
speaks during the panel talk Introducing: The GFA Monitorâ during Day Two of the Global Fashion Summit:
Copenhagen Edition 2022 at Royal Opera House on June 08, 2022 in Copenhagen, Denmark.
(Photo by Lars Ronbog/Getty Images for Copenhagen Fashion Summit)</rdf:li></rdf:Alt>
</dc:description><plus:Licensor><rdf:Seq>
<rdf:li rdf:parseType="Resource">
<plus:LicensorURL>https://www.gettyimages.com/detail/1401700937?utm_medium=organic&amp;utm_source=google&amp;utm_campaign=iptcurl</plus:LicensorURL>
</rdf:li></rdf:Seq></plus:Licensor></rdf:Description>
</rdf:RDF></x:xmpmeta>`;

      const xmlStr = ref(str);

      //解析
      const parse = () => {
        const x2js=require('x2js');
        const x2jsone=new x2js(); //实例
        const xml = x2jsone.xml2js(xmlStr.value)
        let description = getObjectValueByPath("xmpmeta.RDF.Description.description.Alt.li.__text",xml);
        if (description == false){
            console.log("description:不存在");
        } else {
            console.log("description:");
            console.log(description);
        }
        let creator = getObjectValueByPath("xmpmeta.RDF.Description.creator.Seq.li.__text",xml);
        if (creator == false){
          console.log("creator:不存在");
        } else {
          console.log("creator:");
          console.log(creator);
        }
        let assetID = getObjectValueByPath("xmpmeta.RDF.Description._GettyImagesGIFT:AssetID",xml);
        if (assetID == false){
          console.log("assetID:不存在");
        } else {
          console.log("assetID:");
          console.log(assetID);
        }
        let credit = getObjectValueByPath("xmpmeta.RDF.Description._photoshop:Credit",xml);
        if (credit == false){
          console.log("credit:不存在");
        } else {
          console.log("credit:");
          console.log(credit);
        }
        let licensorURL = getObjectValueByPath("xmpmeta.RDF.Description.Licensor.Seq.li.LicensorURL.__text",xml);
        if (licensorURL == false){
          console.log("licensorURL:不存在");
        } else {
          console.log("licensorURL:");
          console.log(licensorURL);
        }

      }

      //得到一个对象中指定path的值
      const getObjectValueByPath = (path, object) => {
      //将传入的对象路径字符串拆分为数组
      var pathList = path.split('.');
      var obj = object;
      if(!obj) {
        return false;
      }
      for(var i=0; i<pathList.length; i++) {
        let key=pathList[i];
        if(!obj[key]) {
          return false;
        }
        obj = obj[key];
      }
      return obj;
      }

      return {
        parse,
        xmlStr,
      }
  }
}
</script>

<style scoped>

</style>

三，测试效果

 

四，查看vue框架的版本: 

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped

 

标签：xml,vue,console,log,getObjectValueByPath,37,x2js
来源： https://www.cnblogs.com/architectforest/p/16475720.html