标签：xml vue console log getObjectValueByPath 37 x2js

一，安装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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。