Code Monkey home page Code Monkey logo

Comments (7)

enesser avatar enesser commented on May 28, 2024

@bosemian Yes, that shouldn't be a problem.

from vcards-js.

bosemian avatar bosemian commented on May 28, 2024

@enesser Great, but I can not see this libraries on https://cdnjs.com/libraries.

from vcards-js.

alt-win avatar alt-win commented on May 28, 2024

Yesss. CDN support please!
What's the link to the CDN @enesser?

from vcards-js.

vijaysolankiii avatar vijaysolankiii commented on May 28, 2024

@enesser Any update ?

from vcards-js.

pascalwengerter avatar pascalwengerter commented on May 28, 2024

Does https://unpkg.com/browse/[email protected]/index.js work for any of y'all?

from vcards-js.

vesper8 avatar vesper8 commented on May 28, 2024

I think this is the correct url to use: https://unpkg.com/[email protected]/index.js

but I can't figure out how to actually use that inside my Vue component

from vcards-js.

pascalwengerter avatar pascalwengerter commented on May 28, 2024

@vesper8 I ended up rolling my own solution, not exactly proud of it but it works. It lives in a composable and gets called via a @click handler

interface Profile {
  id: string;
  address: string;
  email: string;
  firstName: string;
  lastName: string;
  title: string;
  titleEn: string;
  phoneCell?: string;
  phoneWork?: string;
  profilePicture?: string;

  expand: {
    works_at: {
      street: string;
      city: string;
      country: string;
    };
    works_in: {
      id: string;
      name: string;
    };
  };
}


const makeVCardInfo = (info: string) => `N:${info}\r\n`;
const makeVCardName = (name: string) => `FN:${name}\r\n`;
const makeVCardOrg = (org: string) => `ORG:${org}\r\n`;
const makeVCardTitle = (title: string) => `TITLE:${title}\r\n`;
const makeVCardTel = (type: string, number: string | undefined) =>
  number && `TEL;TYPE=${type}:${number}\r\n`;
const makeVCardAdr = (address: string) => `ADR;TYPE=WORK,PREF:;;${address}\r\n`;
const makeVCardEmail = (email: string) => `EMAIL:${email}\r\n`;
const makeVCardTimeStamp = () => `REV:${new Date().toISOString()}\r\n`;

export default function (profile: Profile) {
  const vcard =
    "BEGIN:VCARD\r\nVERSION:3.0\r\n" +
    makeVCardInfo(`${profile.lastName};${profile.firstName};`) +
    makeVCardName(`${profile.firstName} ${profile.lastName}`) +
    makeVCardOrg(profile.expand.works_in.name) +
    makeVCardTitle(profile.title) +
    makeVCardAdr(
      `${profile.expand.works_at.street}, ${profile.expand.works_at.city}, ${profile.expand.works_at.country}`
    ) +
    makeVCardEmail(profile.email) +
    makeVCardTel("WORK", profile.phoneWork) +
    makeVCardTel("CELL", profile.phoneCell) +
    makeVCardTimeStamp() +
    "END:VCARD";

  const a = document.createElement("a");
  const file = new Blob([vcard], { type: "text/vcard" });
  const sanitizedName = sanitizeName(profile.firstName, profile.lastName);

  a.href = URL.createObjectURL(file);
  a.download = `vcard-${sanitizedName}.vcf`;
  a.click();

  URL.revokeObjectURL(a.href);
}

from vcards-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.