-Hi community!
I'm working in WIX Velo and trying to write a code that creates a VCF file and then lets the user download it by clicking a button. Currently, I'm stuck with the following code version below that creates a VCF file (checked it in the console) but didn't run the download function:
import VCard from 'vcard-creator';
import { saveAs } from 'file-saver';
function createAndDownloadVCF() {
// Create the VCard data
const card = new VCard();
card.addName('Doe', 'John');
card.addEmail('john.doe#example.com', 'INTERNET');
card.addPhoneNumber('123-456-7890', 'WORK');
// Convert the VCard data to a Blob object
const blob = new Blob([card.toString()], { type: 'text/vcard' });
// Save the Blob object as a file
saveAs(blob, 'contact.vcf');
// Log the full VCard data to the console
console.log(card.toString());
}
$w('#downloadButton').onClick(() => {
createAndDownloadVCF();
});
Can anyone suggest what might be done to fix it?
Big thanks in advance!
I've also tried using the 'window' object to run the VCF file download and used the code below but always have an error: Unhandled Promise Rejection: ReferenceError: Can't find variable: window
// Convert the VCard data to a Blob object
const blob = new Blob([card.toString()], { type: 'text/vcard' });
// Create a URL for the Blob object
const blobUrl = URL.createObjectURL(blob);
// Open the URL in a new browser window
window.open(blobUrl, '_blank');
Related
I am using the package hopding/pdf-lib from github within the browser to generate a pdf. I get the result as a uint8array. I can send this to the browser using rndme/download from github which stores the pdf first to the local disk and then sends it to a new browser tab and opens it in the pdf viewer. As I dont want to store it to disk i tried the following code:
const pdfBytes = await pdfDoc.save(); // create the pdf as uint8array
//download(pdfBytes, fn, "application/pdf");
let blb = new Blob(pdfBytes, {type: 'application/pdf'});
let link = window.URL.createObjectURL(blb);
window.open(link);
This opens the new tab with the pdf viewer, however it is empty. I checked the blob with the debugger and it tells me:
Blob { size: 772729, type: "application/pdf" }
There are no error messages. Why is the target empty?
The pdfBytes should be passed into the blob constructor in an array. The first argument of the blob constructor should be an array containing all the objects to be inserted into the blob.
An error is not being thrown because pdfBytes is an array of numbers, so all the numbers in the array are being inserted into the blob, rather than pdfBytes itself.
The blob creation should look like this:
let blb = new Blob([ pdfBytes ], {type: 'application/pdf'})
// notice how pdfBytes is passed inside of an array
Brilliant!! That's working. Thanks alot!
I have an HTML form
where there is a pdf file attachment field()
at last, I make a post request with all the field form data
when and select to field android file picker opens
if I select pdf file from storage - no error - API post successful
But if I select a file from my google drive from the android file picker - API post fails - net::err_upload_file_changed.
PS: I have managed to show a message to the user if selected from google drive that please select from storage but I don't want that I want to actually be able to post the file with the attachment
As explained in comments, it's a bug with Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=1063576).
The following error can also be raised: NotReadableError: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired..
As a workaround, clone your File or Blob before further use:
const buffer = await file.arrayBuffer();
const clone = new File([buffer], file.name, { type: file.type });
const buffer = await file.arrayBuffer();
const clone = new File([buffer],file.name, { type: file.type });
let FD = new FormData();
FD.append('uploaded_file', clone);
And use FD wherever required.
I am using 'exceljs' module in my Angular project to build an Excel file.
Instead of exporting it as Excel file, I would first like to convert it to PDF and then download it as such.
I can successfully export and save this file to my computer:
workbook.xlsx.writeBuffer().then((data) => {
console.log(data); // Uint8Array
console.log(data.buffer); // ArrayBuffer
console.log(new Blob([data])); // Blob
// code I use to export it as an Excel File
const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});
const test = FileSaver.saveAs(blob, 'test.xlsx');
});
As written above, instead of an Excel file I would like to have it exported as a PDF file.
From the code you can see that 'exceljs' is giving me an Uint8Array stream of data, from which I can get out an ArrayBuffer, or I can convert it to a Blob.
I have tried using this without success:
workbook.xlsx.writeBuffer().then((data) => {
const blob = new Blob([data], { type: 'application/pdf' });
// or with 'application/octet-stream' type
// const blob = new Blob([data], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, 'test.pdf');
});`
The PDF file gets exported, but it cannot be opened.
I get an error like "The file is corrupted."
Thank you for all the help in advanced.
I have been working on a project, I download a zip file from internet through XMLHttpRequest (type: blob ) and then I try to read its content using JSzip.So every zip has a json which I am interested in say manifest.json. So I was successful to read it with this code.
var read_zip = new JSZip();
res=xhr.response;
read_zip.loadAsync(xhr.response).then(function (zip) {
return zip.file("manifest.json").async("string");
}).then(function (text) {
obj = JSON.parse(text);
console.log(text);});
after this I made some changes to 'obj', Now I want to replace the existing manifest with this modified 'obj' json contents and save it.
I was trying this code
var write_zip = new JSZip();
write_zip.loadAsync(xhr.response).then(function (zip) {
zip.file("manifest.json" , obj) ;
zip.generateAsync({type:"blob"})
.then(function (blob) {
saveAs(blob, "hello.zip");
});});
but I am getting this error
Uncaught (in promise) Error: Can't read the data of 'manifest.json'.
Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc)
?
sorry, I am new to this.
It looks like you're trying to write an object into zip which is not supported. According to the documentation on JsZip the value to be written needs to be of type:
String/ArrayBuffer/Uint8Array/Buffer/Blob/Promise/Nodejs stream
See: JSZip#file(name, data [,options])
I am currently a developing an application that is using a PDFTron webviewer. Is there anyway to save the edited pdf edited with pdftron webviewer to the server?
There is a feature of pdftron that saves annotations to the server, but I need to save the whole pdf with the edits to the server.
You could call the following function from a WebViewer config file to get the PDF data as a blob. Once you have the blob you can refer to one of the many examples online of how to upload a blob to a server.
function uploadPDF() {
var docViewer = readerControl.docViewer;
var options = {
xfdfString: docViewer.getAnnotationManager().exportAnnotations()
};
var doc = docViewer.getDocument();
doc.getFileData(options).then(function(data) {
var arr = new Uint8Array(data);
var blob = new Blob([arr], {
type: 'application/pdf'
});
// upload blob here
});
}