VUE读取Vcard文件,并获取/筛选想要的内容

 

我是Vcard文件，安卓通讯录，test.vcf，它的固定格式，文件内容如下（里面有四个联系人）：

然后我是要获取里面的内容（因为我与后台交互是数据传输，也就是JSON方式），所以我需要获得我需要的姓名N和电话号码CELL就行。

首先我们要做的事读取这个Vcard文件，参考这个可以实现文件读写（任何后缀的文件，类似txt）：https://blog.csdn.net/Make_Progress365/article/details/107017637

根据它的方法，我打印出来如下：

console.log("读取的内容如下：",this.snippets);

但是问题来了，这样我不能直接获取我想要的内容，可以一行行读取，然后获取，但是js我不熟悉数据流怎么写，java可以

但是，我们知道，如果转换成其他数组获取对象，我们就可以直接获取

所以：this.snippets是读取到的数据，就是上面的

 let temp=this.snippets.split('\n').map(v => v.trim()).sort((a, b) => b.length - a.length)
  console.log("读取的内容如下：");

 

这就直接获取数据编程数组了，举例，

我们获取数组的方式不都是 arry[0]="TEL;TYPE=CELL:3254894"  或者  arry[21]="FN:打麻将" 这样的都是我们要想获取的号码和姓名，这时候我们是要去掉多余部分，就是split(":")方法(因为他们共同特点都是：分开，就是再“：”后面是我们要的)，提取数组每个内容，类似这样： ["TEL;TYPE=CELL", "3254894"] 或者 ["FN", "打麻将"] ，这不就简单了？

temp[0].split(":") 这个就获得的结果就是：["TEL;TYPE=CELL", "3254894"] ，数组2不正是你要的结果么，

temp[0].split(":") [1]  这个就获得的结果就是："3254894"

同理

temp[23].split(":") 这个就获得的结果就是：["N", "打麻将"]，数组2不正是你要的结果么，

temp[23].split(":") [1]  这个就获得的结果就是： "打麻将"

循环遍历所有，见我写的

 for(let i=0;i

 

 

整个代码如下：

VUE肯定先写html部分（采用element的el-upload）：

            

                


                    
                        选取文件
                        点击上传
                        
若已选择文件，先把该文件取消，否则无法选择其他文件
                    


            
        

 

然后，再data处，需要什么变量就用什么，自己看看那些带this.xxx就是，这里就省略！

最后就是技术部分，即：methods:{}写方法的部分

1.选择文件按钮

importFile(file){
                //原生选择文件按钮适用
                 //     var objFile = document.getElementById('fileid').files[0];//element框架不适用，仅用于原生js
                var objFile = file.raw;
                var objStr = /\.(xlsx|xls|csv|vcf)$/; 
                if(!objStr.test(objFile.name)){
                    this.$alert('选择的文件格式不对，请选对格式', '警告', {
                        confirmButtonText: '确定',
                    });
                    return false;
                }else{
                    this.suffix = objFile.name.split('.')[1];
                }

                if (typeof FileReader === "undefined") {  //用来判断你的浏览器是否支持 FileReader
                    this.$message({
                        type: "info",
                        message: "您的浏览器不支持文件读取。"
                    });
                    return;
                }
                this.thisObj=objFile;
                console.log("选中的xlsx文件",this.thisObj);
                

         },

2.点击上传按钮

httpRequest() {//上传按钮，取消
            this.isUploadflag = true;//这个是标志位，就是要点击上传按钮，才能点击确定键，不然获取不到文件的数据，你们可以试试

            if(this.suffix  === "xlsx" || this.suffix === "xls" || this.suffix === "csv"){
                console.log("选择得是EXCEL格式",this.suffix,"文件名",this.thisObj)
                this.$root.DataBus.setElsxFile(this.thisObj);//如果木有上传这步，elsxData这个就获取不到

            }else if(this.suffix  === "vcf"){
                //element得upload上传按钮适用
                let reader = new FileReader();   //先new 一个读文件的对象 FileReader
                //  reader.readAsText(file.raw, "gb2312");  //读.txt文件
                reader.readAsArrayBuffer(this.thisObj); //读任意文件
                console.log("文件名：",this.thisObj.name);
                reader.onload = function (e) {
                    var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
                    // ints = ints.slice(0, 5000); //截取一段读取的内容
                    this.snippets = new TextDecoder('utf-8').decode(ints); //gb2312二进制缓存区内容转化成中文（即也就是读取到的内容）
                    console.log("读取的内容如下：",this.snippets);
                    //把数据转换成数组，以便获取想要的内容
                    let temp=this.snippets.split('\n').map(v => v.trim()).sort((a, b) => b.length - a.length)
                     console.log("读取的内容如下：",this.snippets);

                    //循环所有的数组，拆分获取
                    for(let i=0;i