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!
Related
-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');
I'm building an electron ("electron": "^5.0.9", on windows 10 1903) app and have a nodejs buffer(Uint8Array)("node": "v10.6.0") containing data like "[255, 216, 255, 224, 0, 16,..." with MIME type "image/jpeg".
I tried to create an object url from the buffer and set the url as the "src" of an image, but the image didn't show
I have tried to save it as a jpg on local fs to verify the data and successed
In the Network tool, there was a request sent to blob:file:///60cb1522-25d2-44e9-982d-21e2106dddf8 and the Status Code is 200.
The code like this
const imgBlob = new Blob(buffer, { type: `image/jpeg` })
const imgUrl = window.URL.createObjectURL(imgBlob)
document.querySelector(`img`).src = imgUrl
Expected: the image show correctly
Actual result: the image didn't show
I found the answer here
How can I create a PNG blob from binary data in a typed array?
All I need is just a [ ] to wrap the buffer like
const imgBlob = new Blob([buffer], { type: `image/jpeg` })
According to the MDN
var aBlob = new Blob(array [, options]);
array is an Array of ArrayBuffer, ArrayBufferView, Blob, DOMString objects, or a mix of any of such objects, that will be put inside the Blob. DOMStrings are encoded as UTF-8.
Blob()
Holy crap!
I want to convert a blob file to a png. I tried this:
var blob = new Blob([ia], {type: 'image/png'});
$scope.farmerRegisterObj.farmerImage = blob;
I want to convert it into file object ..and should be able to append in a Formdata.
A Blob is a File like object, or more exactly, a File object is a Blob with a name property.
You can create a File object from a Blob thanks to the File(blob, name) constructor, but this will be useless in almost every use cases*.
All you can do with a File can be done with a Blob.
For instance, in your case, you can append a Blob directly into a FormData so that it is sent as a file/multipart :
var form = new FormData();
form.append(fieldName, blob, fileName);
* I only used it once, while trying to hack the behavior of browsers default page title when viewing a file like an image in a tab, and it only partially worked only in FF. If someone has real use cases where a File is needed, I'd be glad to know about it.
I am developing a JavaScript little webmail.
I receive from the server a Base64-encoded string, that represents a file (it could be whatever type). I decode the string, a map it to a Uint8Array, and with it, I generate a Blob object with I create a data URI with
FileReader.readAsDataURL(blob)
Until here is pretty straightforward, but I am having problem with the download part.
I put the DataURI in
window.open(dataURI)
But chrome opens a new window and display my image, or my text. But I need to avoid this behaviour, and download the file instead.
I have red that this could be done with Content-Disposition "attachment" but I am not sure if it is my case, because I am generating the file from a string from the server.
Anyone who can help me understand?
Did you try to use "saveAs" ?
saveAs(blob, "hello.zip");
In the case you need wide browser support you could try polifill. More information
I am pretty sure you can set the type of the blob
var blob = new Blob(["Hello world!"], { type: "application/download" });
Edit:
without FileSaver.js:
var blob = new Blob(["Hi stack"], {type: 'application/download'});
var reader = new FileReader();
reader.onloadend = function(e) {
window.open(reader.result);
}
reader.readAsDataURL(blob);
Edit:
Documentation and browser support information ("Browser compatibility" tab):
FileReader
Blob
I want to create a new blob in memory, put the content in the blob, name it, and finally save it as a file in Drive.
I know how to create a file in Drive from blobs. The only thing I'm looking for is creating the empty new blob to start with.
You can create a new blob in memory with the Utilities Service:
function createNewBlob() {
var blobNew = Utilities.newBlob("initial data");
blobNew.setName("BlobTest");
Logger.log(blobNew.getName());
blobNew.setDataFromString("Some new Content");
Logger.log(blobNew.getDataAsString())
var newFileReference = DriveApp.createFile(blobNew);
newFileReference.setName('New Blob Test');
};
You can also create a new file, with some small amount of data, then change the content. In this example, a file is created in the root directory with the contents "abc". Then the content of the blob is set to something else.
function createNewBlob() {
// Create an BLOB file with the content "abc"
var blobNew = DriveApp.createFile('BlobTest', 'abc', MimeType.Blob);
Logger.log(blobNew.getName());
blobNew.setContent("Some new Content");
Logger.log(blobNew.getBlob().getDataAsString())
};
You could create data in memory, then create the blob with the finished data.