enesser / vcards-js Goto Github PK
View Code? Open in Web Editor NEWCreate vCards to import contacts into Outlook, iOS, Mac OS, and Android devices from your website or application.
License: MIT License
Create vCards to import contacts into Outlook, iOS, Mac OS, and Android devices from your website or application.
License: MIT License
Actually I am facing the problem regarding the social links after downloading the vcard file just because it's not showing the social links in my vcard after download.
Here is the code:
var vCardsJS = require('vcards-js');
//create a new vCard
var vCard = vCardsJS();
//set properties
vCard.firstName = name;
vCard.organization = companyName;
vCard.workPhone = phone;
vCard.url = website;
vCard.workEmail = email;
vCard.socialUrls['facebook'] = facebook;
vCard.socialUrls['instagram'] = instagram;
vCard.socialUrls['twitter'] = twitter;
vCard.socialUrls['youtube'] = youtube;
vCard.socialUrls['snapchat'] = snapchat;
vCard.socialUrls['tiktok'] = tiktok;
vCard.socialUrls['whatsapp'] = whatsapp;
vCard.socialUrls['pinterest'] = pinterest;
let card = await vCard.getFormattedString();
Links are coming from my site front-end.
Is it planned to support parsing vCard files?
There is a small typo in vCardFormatter.js in the condition for logo property that prevents to render it in output file.
Hello,
Thanks for an awesome library. I want to let you know my observations and improvement.
Can you add a method to add raw base64 format to the library.
embedFromData : function(data,mediaType){
this.mediaType = mediaType;
this.url = data;
this.base64 = true;
}
vCard.photo.embedFromData( raw data, 'PNG');
how to create .vcf file with more than 4000 contacts with images, I already created .vcf file with 4000 contacts using vcards-js but, the image does not display in contact profile in mobile, image display less than 10 contacts in .vcf file. it does not work more than 10 contacts. I want images in contact profile in .vcf file with more than 4000 contacts.
We have an odd scenario where we need to support vCard 2.1, however, we've discovered a formatting issue with it on newer phones. In cases where we specify format 2.1, the label for the address shows as CHARSET
. Upon further investigation, I discovered you format the ADR field exactly the same for 2.1 as you do for 3.0. This is making the phones pickup the label as the defined charset and not the type as specified or ignoring the field all together.
It took some digging, but I did find the original 2.1 specification with an example:
Delivery Addressing Properties
Delivery Address
This property specifies a structured representation of the physical delivery address for the vCard object. The property is made up of components that are based on the X.500 Post Office Box attribute, the X.520 Street Address geographical attribute, the X.520 Locality Name geographical attribute, the X.520 State or Province Name geographical attribute, the X.520 Postal Code attribute, and the X.520 Country Name geographical attribute.
This property is identified by the property name ADR. The property value consists of components of the address specified as positional fields separated by the Field Delimiter character (ASCII decimal 59). The property value is a concatenation of the Post Office Address (first field) Extended Address (second field), Street (third field), Locality (fourth field), Region (fifth field), Postal Code (six field), and Country (seventh field) strings. An example of this property follows:
ADR;DOM;HOME:P.O. Box 101;Suite 101;123 Main Street;Any Town;CA;91921-1234;
Support for this property is optional for vCard Writers conforming to this specification.
Delivery Address Type
This property parameter specifies the sub-types of physical delivery that is associated with the delivery address. For example, the label may need to be differentiated for Home, Work, Parcel, Postal, Domestic, and International physical delivery. One or more sub-types can be specified for a given delivery address.
The property parameter can have one or more of the following values:
Description
Property Parameter Value
TYPE=
Indicates a domestic address
DOM
Indicates an international address (Default)
INTL
Indicates a postal delivery address (Default)
POSTAL
Indicates a parcel delivery address (Default)
PARCEL
Indicates a home delivery address
HOME
Indicates a work delivery address (Default)
WORK
While it does say that you can specify TYPE=
, modern Android and iPhones do not seem to pick up on this. The few examples I've found across the internet have also favored the type as the second field for ADR and omits the TYPE=
Hi,
when I import contact, all data is imported except one, which is the photo, I tried :
1/ this one
vCardUser.photo.attachFromUrl('https://avatars2.githubusercontent.com/u/5659221?v=3&s=460', 'JPEG');
2/ and this one :
vCardUser.photo.url = 'https://avatars2.githubusercontent.com/u/5659221?v=3&s=460';
vCardUser.photo.mediaType = 'JPEG';
But without any effect.
Could you help me please.
Thanks,
Hi. Thanks for your plugin! But when i clone it. In my for folder, it hasn't any example.
I created index.html and implement tests.js into it. But it appeared a error.
Can you show how to use your plugin?
Sorry because i am a beginner.
Thanks for you support!
:D
iOS adds the country code as field X-ABADR to an address.
Hi first of all thank you for sharing this package with the community.
I had a problem when I tried to import a vCard with a X-SOCIALPROFILE into macOSX address book. The Mac app was not able to understand the encoding, please see the imported result:
Removing the encodingPrefix did the trick (line 378) - however I am not sure if this is conform to the vCard standard.
formattedVCardString += 'X-SOCIALPROFILE' + ';TYPE=' + key + ':' + e(vCard.socialUrls[key]) + nl();
Could you please look into this problem?
Cheers,
Michael
Hi,
Some of the ios mobiles doesn't support the package parser format.
What is the correct format for ios?
Thanks ;)✨✨✨
A new property for URL;TYPE=WORK would be helpful since the current untyped URL vCard property is mainly used for personal website and not the business/work website.
It would also solve the problem when someone wants to have both personal and work websites included in a vcard.
New 'workUrl' object property could be introduced for this but it's just my suggestion.
it seems I can't add to contacts, do you know why ? Thanks.
Hello.
I've been trying to attach a photo using attachFromUrl, as per the example but it doesn't work.
Tried attaching with base64 string and that does work.
I get this error when using workAddress fields.
First, thank you for the work, it really helps so keep it up =D.
I have found though that when using the example in the readme, the birthday date is not valid for javascript. Just update new Date('01-01-1985') to new Date(1985, 1, 1) =D
I am trying example from documentation:
https://www.npmjs.com/package/vcards-js#complete-example but with version 4.
`
var vCard = vCardsJS();
vCard.version = '4'
//set basic properties shown before
vCard.firstName = 'Eric';
vCard.middleName = 'J';
vCard.lastName = 'Nesser';
vCard.uid = '69531f4a-c34d-4a1e-8922-bd38a9476a53';
vCard.organization = 'ACME Corporation';
vCard.workPhone = '312-555-1212';
`
In version 4, the phone output:
TEL;VALUE=uri;TYPE="voice,work":tel:312-555-1212
Which is not showed correctly
When i use version 3, the output is TEL;TYPE=WORK,VOICE:312-555-1212
and it works as expected
Am i doing something wrong or how can i use phone in version 4?
Thanks
Can i use in browser with frontend only.
I don't see any reference to setting custom field (X-FOO-BAR: something). Is there a way to do this that I'm missing?
tia,
dan
please suggest me... everything i tested but come error fs.writeFileSync is not a function when i savetofile. but fs.writeFileSync is inbuild when i install vcard package
Hello I am trying to implement the library with svelte but I get the error:
Uncaught ReferenceError: require $$ 0 is not defined
at
could you help me ?
Class working create except for the attachFormUrl function.
Added this with vCard.photo.attachFromUrl('https://avatars2.githubusercontent.com/u/5659221?v=3&s=460', 'JPEG'); but is not shown in Contacts on Mac.
Is this a known issue?
Can I use this to embed multiple contacts in one vcf file?
If yes, how?
Is the documentation always valid from your sample code ?
vCard.photo.attachFromUrl('https://avatars2.githubusercontent.com/u/5659221?v=3&s=460', 'JPEG');
I was thinking we can directly use:
vCard.photo.url
Can you please clarify ?
Can we add custom urls similar to how we add custom socials? Something like vcard.url[custom] = 'http://mycustomurl.com'.
From what I can tell the only options right now are url and work url and in my scenario url is used by their website and 'work' is not the appropriate title or category for the additional url i want to add. Also, what if we had 3 urls?
The example code in the documentation on the npm page causes an error in Node 8. The line:
vCard = vCard()
causes:
TypeError: vCard is not a function
.
Changing it to something like userVCard = vCard()
fixes the issue.
when trying to create a VCF I get the following error
Exception while invoking method 'createVCF' Error: ENOENT, no such file or directory 'public/Alex-Lopez.vcf'
My question is will this create the VCF or does the VCF file have to already exist?
Empty value of LABEL parameter (v4 format) should not be outputted in getFormattedAddress function otherwise it completely breaks import of vcard file in Thunderbird address book.
Importing is fine if LABEL contains some text. But empty values should not be outputted anyway.
I'm using your lib for a french application and I need support for accent.
After some tests, it seems that adding the charset in the vcard solve my pb.
Do you think it is possible to add the charset support in your lib to able to display accents as described in the following sample:
BEGIN:VCARD
VERSION:4.0
FN:frédéric
N;CHARSET=utf-8;:;pêché;;;
X-SOCIALPROFILE;CHARSET=utf-8;TYPE=twitter:http://www.twitter.com/frédéric
X-SOCIALPROFILE;TYPE=skype:S12345
REV:2015-05-18T21:43:30+00:00
END:VCARD
Hi,
When you embed a base64 string image using
vCard.photo.embedFromString('iVBORw0KGgoAAAANSUhEUgAAA2...', 'image/png');
the card cannot be imported on Samsung devices. I tried on different Samsung devices. It shows "Unable to load data".
The card imports correclty on iOS devices and on Windows computers.
When I modify the VCF file manually by adding an additional \r\n at the end of the base64 string, it can be imported correctly on Samsung devices and others.
Could you please have a look?
Best regards
Julien
NOT WORKING ON SAMSUNG DEVICES
BEGIN:VCARD
VERSION:3.0
FN;CHARSET=UTF-8:TestJulien TestBarbé
N;CHARSET=UTF-8:TestBarbé;TestJulien;;;
EMAIL;CHARSET=UTF-8;type=WORK,INTERNET:[email protected]
PHOTO;ENCODING=b;TYPE=image/jpeg:/9j/4AAQSkZJRgABAgAAZABkAAD/7AA [...] 9xHwt2bpyq6k+nuI0rh6aIpJ9JE13UVM6B1elBof//Z
TEL;TYPE=CELL:+3223473912
ADR;CHARSET=UTF-8;TYPE=WORK:;;Rue Neuve 1;;;;
ORG;CHARSET=UTF-8:TestPepper IT
REV:2021-05-02T21:03:37.622Z
END:VCARD
WORKING ON ALL DEVICES (mind the \r\n after the base 64 string)
BEGIN:VCARD
VERSION:3.0
FN;CHARSET=UTF-8:TestJulien TestBarbé
N;CHARSET=UTF-8:TestBarbé;TestJulien;;;
EMAIL;CHARSET=UTF-8;type=WORK,INTERNET:[email protected]
PHOTO;ENCODING=b;TYPE=image/jpeg:/9j/4AAQSkZJRgABAgAAZABkAAD/7AA [...] 9xHwt2bpyq6k+nuI0rh6aIpJ9JE13UVM6B1elBof//ZTEL;TYPE=CELL:+3223473912
ADR;CHARSET=UTF-8;TYPE=WORK:;;Rue Neuve 1;;;;
ORG;CHARSET=UTF-8:TestPepper IT
REV:2021-05-02T21:03:37.622Z
END:VCARD
Hello guys,
Can anyone help me in this:
I have PDF file with phone number in it and the client wants me make it clickable and leads to saving a contact info in the mobile contacts.
using adobe acrobat I can make buttons and give them actions when pressed, one of the actions options in Adobe acrobat is to "run JavaScript" but I can't write the proper code for it
Thanks a lot
Hi enesser, my project is very small. I don't create that via npm, So I can use this vCards-js on CDN ?,
Thank you :)
If somebody (me) stores e.g. the cellPhone
as a number, it will crash the whole formatter.
(https://github.com/enesser/vCards-js/blob/master/lib/vCardFormatter.js#L223) as it means you're trying to generate an array with a certain size which can lead to errors if the range is too large.
E.g. new Array(12345678900)
will throw following error:
RangeError: Invalid array length
at Object.getFormattedString (/Project/node_modules/vcards-js/lib/vCardFormatter.js:254:39)
at Object.getFormattedString (/Project/node_modules/vcards-js/index.js:321:35)
...
So vCard.cellPhone = new Array(vCard.cellPhone);
should be replaced with vCard.cellPhone = [vCard.cellPhone];
I can create one Vcard(vcf file) from one object.
But I want to create one Vcard(vcf file) from multiple objects.
e.g :
I have 3 Json objects such as
[ { N: 'Stenerson,Derik',
FN: 'Derik Stenerson',
ORG: 'Microsoft Corporation',
TITLE: '',
PHOTO: { TYPE: '', PHOTO: '' },
TEL: [ [Object], [Object] ],
ADR: [],
EMAIL: '[email protected]' },
{ N: 'Ganguly,Anik',
FN: 'Anik Ganguly',
ORG: ' Open Text Inc.',
TITLE: '',
PHOTO: { TYPE: '', PHOTO: '' },
TEL: [ [Object] ],
ADR: [],
EMAIL: '[email protected]' },
{ N: 'Moskowitz,Robert',
FN: 'Robert Moskowitz',
ORG: '',
TITLE: '',
PHOTO: { TYPE: '', PHOTO: '' },
TEL: [],
ADR: [],
EMAIL: '[email protected]' } ]
and want to create one Vcard such as Xyz.vcf then how to create it ?
Thanks in advance
Hi, i want to create QR as VCard like https://www.the-qrcode-generator.com/ in expressjs. Can we do that?
Thanks
Is there a way using this library to convert existing vcards back to objects, arrays and / or JSON?
Some developers are wanting to use this for React Native: https://stackoverflow.com/questions/38644405/react-native-using-a-javascript-module-that-relies-on-node-js-core-module/39236621#39236621
I created a separate branch with React Native compatibility from my fork of this repo.
You can either create a new branch with my changes or update the original repo to check the environment and load in react-native-fs if react native: https://github.com/idxbroker/vCards-js/tree/react-native
Is there anyone can explain this?
vCard.homeAddress
vCard.workAddress
Would be really great to add social profile !
X-SOCIALPROFILE;type=twitter:http://twitter.com/joebloggs
Hi, what should I do to fix this error?? (usage for react.js)
Error Message:
ERROR in ./node_modules/vcards-js/index.js 37:17-30
Module not found: Error: Can't resolve 'fs' in '..\node_modules\vcards-js'
node v16.15.0
npm v8.13.2
yarn v1.22.19
Please someone upload an implementation
I'm trying to use the library in the Angular 8 application. For that I installed the package using npm
and in the component file, I used
import * as vCardsJS from 'vcards-js';
myMethod() {
const vCard = vCardsJS();
...
}
But this gives error message as
ERROR in ./node_modules/vcards-js/index.js
Module not found: Error: Can't resolve 'fs' in '/home/code/node_modules/vcards-js'
Is it possible to embed an image using a base64 string. Basically I'm allowing users to take pictures using their mobile device or built in laptop camera, which returns a string.
Is it possible with this library to embed the photo itself as a base64 content in the vcard ?
HI,
i'm reading some files from outlook and i had to make some changes to work, see if that makes sense to incorporate some how
let ediFileContent = fs.readFileSync(fileFound).toString();
ediFileContent = ediFileContent.replace('begin:vcard', 'BEGIN:VCARD')
.replace('end:vcard', 'END:VCARD');
ediFileContent = ediFileContent.split('\n').map(p => {
const arr = p.split(':');
arr[0] = arr[0].toUpperCase().replace(';CHARSET=UTF-8', '');
return arr.join(':');
}).join('\n');
This is the original vcf:
begin:vcard
version:3.0
prodid:Microsoft-MacOutlook/f.17.0.160611
UID:D35EB00C-0C8E-4781-8E9C-372B0E2957D1
fn;charset=utf-8:Joao Mendes
n;charset=utf-8:Mendes;Joao;;;
title;charset=utf-8:Pré-venda
note;charset=utf-8:Grup.\n\n\n\n\n\n\n\n\n
tel;charset=utf-8;type=cell:99999-1326
end:vcard
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.