Comments (7)
@bosemian Yes, that shouldn't be a problem.
from vcards-js.
@enesser Great, but I can not see this libraries on https://cdnjs.com/libraries.
from vcards-js.
Yesss. CDN support please!
What's the link to the CDN @enesser?
from vcards-js.
@enesser Any update ?
from vcards-js.
Does https://unpkg.com/browse/[email protected]/index.js work for any of y'all?
from vcards-js.
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.
@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)
- ios format HOT 8
- Using in Angular (Typescript) HOT 3
- How to insert multiple Full Name and Mobile
- Can i use in browser with frontend only. HOT 5
- Social links aren't showing after vcard downloaded HOT 2
- Contact not imported on Samsung devices when Base64 embedded image present HOT 1
- Custom urls and uploading HOT 1
- require $$ 0 svelte
- Missing X-ABADR
- Error on vCard.saveToFile('./eric-nesser.vcf') --- Error : fs.writeFileSync is not a function HOT 1
- Phone in version 4 is not showed correctly HOT 4
- Usage in vue/nuxt
- Can't resolve 'fs' - React HOT 2
- GEO field support for gps location
- VCF Viewer in JavaScript?
- Cannot start the application. ReferenceError: window is not defined
- Renaming vcf file and image preview
- ( iOS issue ) vcf not showing up on its own....nee to click on download folder to verify HOT 1
- Is it possible to pass in LANGUAGE configuration?
- Some Information needed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vcards-js.