I am trying to create a page where when users visit it will open the contact app on the mobile like when someone opens /details page on phone then it will redirect to the contact app and it's only valid for mobile-only. here I am not able to open the .vcf file directly on the contact app here what I am trying to do here is the vcf file that I am getting from a route

BEGIN:VCARD
VERSION:3.0
FN;CHARSET=UTF-8:xander Nesser
N;CHARSET=UTF-8:Nesser;fgff;;;
TEL;TYPE=WORK,VOICE:+91123456789
TITLE;CHARSET=UTF-8:Software Developer
ORG;CHARSET=UTF-8:xyz
URL;CHARSET=UTF-8:https://google.com
REV:2022-06-27T11:54:28.192Z
END:VCARD

and the to open my code I am trying this code

 useEffect(() => {
  

    const requestOption = {
      method: "GET",
      headers: new Headers({ "content-type": "application/json" }),
      body: undefined,
      redirect: "follow",
    };
    fetch("https://apizz.com/api/profiles", requestOption)
      .then((response) => response.text())
      .then((result) => {
        console.log(typeof result);
        console.log(result);
         var url = 'data:text/x-vcard;charset=utf-8,' + encodeURIComponent((result));
         document.location.href = url;
     
      })
      .catch((error) => {
        console.log("error", error);
      });
  }, []);

but it's downloading instead of opening directly