just a simple example, I tried using window.open
var save = 'test'
var blob = new Blob([save], {
type: "application/pdf;charset=utf-8"
});
var fileURL = URL.createObjectURL(blob);
window.open(fileURL);
I also tried using FileSaver.js
var save = 'test'
var blob = new Blob([save], {
type: "application/pdf;charset=utf-8"
});
saveAs(blob, filename);
Assume the blob contains valid pdf content. It seems to work in all other browsers (including OSX safari) by downloading a pdf file.
However in both cases, it seems to open a new tab that looks like this
I want to be able to do something like this where the pdf would open in a new page
Related
I am able to convert blob into pdf attachment to view in browser without download by following code
var ieEDGE = navigator.userAgent.match(/Edge/g);
var ie = navigator.userAgent.match(/.NET/g); // IE 11+
var oldIE = navigator.userAgent.match(/MSIE/g);
//var bytes = new Uint8Array(response); //use this if data is raw bytes else directly pass resData
var blob = new window.Blob([response], { type: 'application/pdf' });
if (ie || oldIE || ieEDGE) {
window.navigator.msSaveBlob(blob, fileName);
}
else {
var fileURL = URL.createObjectURL(blob);
window.open(fileURL);
}
This is working for pdf in chrome and firefox. But for .doc, .docx,.xlx, it is downloading though i am providing appropriate mime type. ( i.e. for .doc file I am using application/msword and so on).
Note that I am fetching .doc,.docx,.xlx data from secure .net core api. Is there any other way to view word, excel file in browser without download.
This is totally normal behavior, you can't view Word or Excel Documents in your browser by default, that's why the file is just being downloaded. It depends on the browser how files are treated. Old Internet Explorer might just download the PDF too instead of showing it.
I am facing issue to download pdf in SAPUI5 application. Issue is Getting base64 string from backend system but not able to convert it and display as PDF.
I am able to convert the base64 and download also but only small size.
Not able to download for larger PDF file its downloading but shows download failed.
kindly help me out
var data =" JVBERi0xLjQNJeLjz9MNCjc1MDEgMCBvYmogPDwvTGluZWFyaXplZCAxL0wgOTM2NDM1Mi9PIDc1MDMvRSAxMjE3ODgvTiA1MjIvVCA5MjE0MjgzL0ggWyA2..";
var uri = 'data:application/pdf;base64,' + atob(data);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = object.FileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Saving the data as a blob and setting the download link to get the data from the blog may solve your problem for large files. The most effective way in this mechanism is to get the data from your server as binary instead of Base64. It works with base64 too - but it is just a resource over kill in the blob scenario.
var data = Uint8Array.from(atob(base64_string), c => c.charCodeAt(0));
var blob = new Blob([data], {type: "octet/stream"});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
...
...
As per you current solution, a hyperlink will be created with href contains data:application/pdf;base64,' + base64Data. When the hyperlink is clicked the complete URL will be opened in the browser new tab, which makes the browser to download the PFD file.
If the base64 data is bulk then the browser will take time to download PDF. Sometimes browser will be crashed OR leads to download failed error as it takes too much of time to download.
Alternative Options
Using GET_STEAM method you can download the pdf from the backend only.
Using download plugins like downloadjs, FileSaver.js, StreamSaver.js.
As per you requirement you can get different available plugins for file downloading using client-side JavaScript
Here is a sap blog entry solving your problem.
TLDR:
var base64EncodedPDF = "JVBERi0xLjcNCiW..."; // the encoded string
var decodedPdfContent = atob(base64EncodedPDF);
var byteArray = new Uint8Array(decodedPdfContent.length)
for(var i=0; i<decodedPdfContent.length; i++){
byteArray[i] = decodedPdfContent.charCodeAt(i);
}
var blob = new Blob([byteArray.buffer], { type: 'application/pdf' });
var _pdfurl = URL.createObjectURL(blob);
this._PDFViewer.setSource(_pdfurl);
I'm trying to create an image file from a blob-object using the File API and then add it to a form to be sent via XHR. Works like a charm in chrome, but crashes the app in Microsoft Edge.
let file = new File([blobContent], "image.png");
let form = new FormData();
form.append("file", file);
Are there any alternatives to the File API or workarounds to attach a file to the form? If I just add the blob to the form it's not recognized as an image.
Thanks!
Currently IE11, and Edge support the FileAPI but not the File constructor.
In the link that you posted to caniuse.com, there are notes for IE and Edge stating that the File constructor is not supported. I encountered the same issue and my work around was to use Blob instead of File, and then set the type of the blob.
var blob = new Blob([blobContent], {type : 'image/jpeg'});
This is what I did and works
// to change Blob to File
private blobToFile(theBlob: Blob, fileName: string): File {
const b: any = theBlob;
b.lastModifiedDate = new Date();
b.name = fileName;
return b as File;
}
let file;
if (!navigator.msSaveBlob) { // detect if not Edge
file = new File([b], document.originalName, { type: document.mimeType });
} else {
file = new Blob([b], { type: document.mimeType });
file = this.blobToFile(file, document.originalName);
}
Now can continue by variable file as a File in Edge or other browsers.
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
Is it possible to generate a pdf from a byte array in ie9 and open the pdf in a new window? I'm currently using Blob which (of course) isn't supported in IE9. I'm currently looking for an alternative method of doing this. If this isn't possible, is there a way to at least prompt the user to open/save the file? Here's my current code to open the pdf:
this.$http.get(this._apiBase + "/Disclosures/View/" + disclosureId, {responseType: 'arraybuffer'}).success((data) => {
var file = new Blob([data], { type: 'application/pdf' });
var fileUrl = URL.createObjectURL(file);
window.open(fileUrl);
});