Develop Reference

Disable auto download of iframe content on iOS Safari

I have a modal that displays a PDF with two option, one to print and one to download.
The download option is using a blob with content-type: application/octet-stream.
The print option is using a blob with content-type: application/pdf.
The download button works perfectly, but when I open the modal in Safari on iOS, the prompt to download is automatically showing and the file is downloaded automatically. It is working on desktop devices and in chrome.
const downloadBlob = new Blob([int8Array], { type: 'data:application/octet-stream;' });
const printBlob = new Blob([int8Array], { type: 'application/pdf;' });
const downloadFileURL = URL.createObjectURL(downloadBlob);
const printFileURL = URL.createObjectURL(printBlob);
When I remove the src attribute from the iframe, the auto download prompt doesn't show. Any ideas how to resolve this?
{fileType === 'application/pdf' ? (
<>
<div id="wrapperDiv" ref={wrapperRef}></div>
<iframe id="documentObject" src={`${fileSrc}#view=fitH`} title={fileName} style={{ display: 'none' }}>
This browser does not support this document type. Please download the document to view it:
</iframe>
</>
Print button:
const element: Window = window.frames;
element[0].focus();
element[0].print();

For printing use:
printPDF(pdfUrl)
{
var w = window.open(pdfUrl);
w.print();
}
For downloading:
downloadPDF(pdfUrl)
{
var anchor = document.createElement('a');
anchor.href = pdfUrl;
anchor.target = '_blank';
anchor.download = "filename.pdf";
anchor.click();
}
Browser support: http://caniuse.com/#feat=download
If the download attribute is not supported, it should fallback to just opening the PDF in a new tab.

How to change chrome browsers "download pdf instead of opening" from my web application?

My web application opens a pdf file in a popup or a new tab. Now, when the user has enabled the "Download PDF files instead of automatically opening them in Chrome" under Settings > Advanced >Site Settings, chrome ends up downloading the pdf instead of opening this. How to prevent chrome from downloading the pdf and open it instead. Is there any API that can be called from my web application?

The only way I know of is to use something like PDF.js, to display the PDF in the browser using javascript.
https://mozilla.github.io/pdf.js/
The Online Demo section demonstrates the idea. Included as iframe in a snippet below.
iframe
{
width:610px;
}
<iframe src="https://mozilla.github.io/pdf.js/es5/web/viewer.html">

I have tried many solutions using Javascipt.
But later i knew PDF download thing is bound to browser settings.
Without code when i figured out problem i referred following link :
https://www.howtogeek.com/721441/how-to-download-pdfs-instead-of-previewing-them-in-chrome-firefox-and-edge/ .
And my code was like below
Javascript
/* Helper function */
function download_file(fileURL, fileName) {
// for non-IE
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
var filename = fileURL.substring(fileURL.lastIndexOf('/')+1);
save.download = fileName || filename;
if ( navigator.userAgent.toLowerCase().match(/(ipad|iphone|safari)/) && navigator.userAgent.search("Chrome") < 0) {
document.location = save.href;
// window event not working here
}else{
var evt = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
save.dispatchEvent(evt);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
}
// for IE < 11
else if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, fileName || fileURL)
_window.close();
}
}
HTML Code
<button onClick="download_file('original_link.pdf','any_name.pdf')">Click</button>

How to download a file programmatically using JS (Internet Explorer)

I have a web page where there is a button that when clicked, generates a (by doing a conversion from json) csv file that is downloaded by the browser. It essentially uses the logic from this jsfiddle. This all works in chrome, but in IE, nothing happens.
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
The issue seems to be that the download attribute of an anchor tag doesn't exist in Internet Explorer. I've been looking at numerous articles and SO posts, but I haven't found a coherent solution that I can use in the page.
How can the code from the jsfiddle be implemented in IE?

This is what I have used in the past. This handles IE and non-IE.
var filename = "file.txt";
var data = "some data";
var blob = new Blob([data], { type: 'text/csv' });
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else {
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}

set a Blob as the "src" of an iframe

The following code work perfectly in Chrome
<script>
function myFunction() {
var blob = new Blob(['<a id="a"><b id="b">hey!</b></a>'], {type : 'text/html'});
var newurl = window.URL.createObjectURL(blob);
document.getElementById("myFrame").src = newurl;
}
</script>
But it is not working with IE. Can some one please tell me what is wrong here.
The iframe "src" also set to the blob as shown below.
<iframe id="myFrame" src="blob:0827B944-D600-410D-8356-96E71F316FE4"></iframe>
Note:
I went on the window.navigator.msSaveOrOpenBlob(newBlob) path as well but no luck so far.

According to http://caniuse.com/#feat=datauri IE 11 has only got partial support for Data URI's. It states support is limited to images and linked resources like CSS or JS, not HTML files.
Non-base64-encoded SVG data URIs need to be uriencoded to work in IE and Firefox as according to this specification.

An example I did for Blob as a source of iFrame and working great with one important CAUTION / WARNING:
const blobContent = new Blob([getIFrameContent()], {type: "text/html"});
var iFrame = document.createElement("iframe");
iFrame.src = URL.createObjectURL(blobContent);
parent.appendChild(iFrame);
iFrame with Blob is not auto redirect protocol, meaning, having <script src="//domain.com/script.js"</script> inside the iframe head or body won't load the JS script at all even on Chrome 61 (current version).
it doesn't know what to do with source "blob" as protocol. this is a BIG warning here.
Solution: This code will solve the issue, it runs mostly for VPAID ads and working for auto-protocol:
function createIFrame(iframeContent) {
let iFrame = document.createElement("iframe");
iFrame.src = "about:blank";
iFrameContainer.innerHTML = ""; // (optional) Totally Clear it if needed
iFrameContainer.appendChild(iFrame);
let iFrameDoc = iFrame.contentWindow && iFrame.contentWindow.document;
if (!iFrameDoc) {
console.log("iFrame security.");
return;
}
iFrameDoc.write(iframeContent);
iFrameDoc.close();
}

I've run into the same problem with IE. However, I've been able to get the download/save as piece working in IE 10+ using filesaver.js.
function onClick(e) {
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, fileName);
e.preventDefault();
return false;
};
$('#download').click(onClick);
See http://jsfiddle.net/o0wk71n2/ (based on answer by #kol to JavaScript blob filename without link)

Table to CSV without using download attribute as it is not supported on Safari browser

I am trying to export HTML table to CSV using JQuery.
I am able to export the data to CSV with below code,Succeeded in all browsers but not able to export in Safari(5.1.2) browser.
I tried with download attribute, but came to know Safari browser doesn't support download attribute.
Please let me know if there is work around?
var usersCSVData = [];
usersCSVData.push('LastName ','FirstName ', 'Login ','City ','State','Location ');
var fileName = "UserCSVdata.csv";
var buffer = usersCSVData.join("\n");
var blob = new Blob([buffer], {
"type": "text/csv;charset=utf8;"
});
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, fileName);
}
else {
var link = document.createElement("a");
if (link.download !== undefined) {
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", fileName);
link.style = "visibility:hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}

I think this JavaScript library may be the solution you need:
https://github.com/eligrey/FileSaver.js
You will also need the blob.js dependency for Safari < 6.1