I'm new to Javascript and have been doing some research on BLOBs, and in theory this code should create a new file image but nothing happens, any suggestions?
var blob = new Blob(["hello", "StackExchange"], {type: "text/plain"});
I've tried to save it with:
saveAs(blob, "C:/Users/me/Desktop/BLOOB_EXAMPLE.txt"); // nothing
and
var fs = new FileSaver(blob,"C:/Users/me/Desktop/BLOOB_EXAMPLE.txt"); // nothing
What am I doing wrong??
Related
I'm generating a PDF using the PDFKit library and I would like to insert the generated PDF into a MongoDB collection. On the client side a user should be able to see the list of files in the collection and choose one of these files to download.
As of now I'm saving the PDF in the collection as a Uint8Array and I can then click on the file at the front end to download it.
However, my problem is that the file seems to be corrupt. It will not open in Adobe Reader or in Chrome.
I've tried saving it to the collection with and without PDFKits compression.
Is this possible to do? Or do I have a bad approach to this.
Any help with this would be great and thanks in advance!
Server Side
Most of the code here is based off of this post on the PDFKit GitHub
var doc = new PDFDocument();
var stream = require('stream');
var converter = new stream.PassThrough();
doc.pipe(converter);
var data = [];
converter.on('data', function(chunk) {
data.push(chunk);
});
converter.on('end', Meteor.bindEnvironment( function () {
var buffer = Buffer.concat(data);
PdfFiles.insert({ data:buffer, userID:userId });
}));
// Adding content to the PDF
doc.end();
Client Side
'click .downloadPDF': function (event) {
event.preventDefault();
var file = UserFiles.findOne({userID:Meteor.userId()});
var FileSaver = require('file-saver');
var blob = new Blob(file.data, {type: "application/pdf"});
FileSaver.saveAs(blob, "AwesomePDF");
}
I got the code to work as intended simply by changing:
var blob = new Blob(file.data, {type: "application/pdf"});
to
var blob = new Blob([file.data], {type: "application/pdf"});
I'm trying to convert a dendrogram like this one into a picture (png/jpg). Look what I've tried to do:
function get_dendrogram(){
var svg = document.querySelector('svg');
var data = (new XMLSerializer()).serializeToString(svg);
var blob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
saveAs(blob, "my_image.png");
}
To save the generated blob, I'm using FileSaver.js.
I don't know what I can be missing... When I try to open the file, It says that is corrupted.
I also tried converting the svg to canvas using html2canvas then saving with FileSaver or canvas2image. In these ways I got the image, but It is deformed.
the following code downloads a file that can't be opened(corrupt) and I have absolutely no idea why. I've tried this in so many ways but it never works, it always produces a corrupt file. The original file isn't the problem because it opens fine. I'm trying to open mp4, mp3, and image files.
//$scope.fileContents is a string
$scope.fileContents = $scope.fileContents.join(",");
var blob = new Blob([$scope.fileContents], {type: $scope.file.fileDetails.type});
var dlURL = window.URL.createObjectURL(blob);
document.getElementById("downloadFile").href = dlURL;
document.getElementById("downloadFile").download = $scope.file.fileDetails.name;
document.getElementById("downloadFile").click();
window.URL.revokeObjectURL(dlURL);
You need to download the file contents as binary using an ArrayBuffer e.g.
$http.get(yourFileUrl, { responseType: 'arraybuffer' })
.then(function (response) {
var blob = new Blob([response.data], {type: $scope.file.fileDetails.type});
// etc...
});
Sources:
angular solution
plain javascript solution
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.
Trying to create image(screenshot) of a HTML page using javascript. Able to generate the html blob and display the same in new tab as read only HTML page using the below code.
var scr = document.documentElement.cloneNode(true);
var blob = new Blob([scr.outerHTML], {type: 'text/html'});
window.open(window.URL.createObjectURL(blob));
Please anyone could tell me how to save the same as image.
Take a look at FileSaver.js,
var bb = new BlobBuilder();
bb.append((new XMLSerializer).serializeToString(document));
var blob = bb.getBlob("application/xhtml+xml;charset=" + document.characterSet);
saveAs(blob, "document.xhtml");
Some Documentation
API