i am using blob url and iFrame to print document. It's work fine in Chrome but not working in IE.
can anyone tell me how to print blob url set in iframe src?
let file = new Blob([res.blob()], { type: 'application/pdf' });
let blobURL = URL.createObjectURL(file);// here file is blob object
let iframe = document.createElement('iframe');
document.getElementById('viewerContainer').appendChild(iframe);
iframe.onload = function () {
iframe.contentWindow.print();
};
iframe.src = blobURL;
I don't know the specific case of IE7 but I had a similar error with Firefox. This one triggers the onload event before the content is fully loaded. Unfortunately, I couldn't find a solution. So I cunningly used a setTimeout().
This solution is weak but you can use setTimeout(time) with a time that will allow you to load the full content of the document. Warning this time depends on the network connection
Related
How to get another html file as if getting it by document
Basically, the same 'document' instance type used for document.getElementsByClassName(), but instead of getting the document the javascript code is in, it gets another .html file in the same domain. For example, "blog.html".
Here's what I want it to hypothetically look like
var blogdocument = getDocument("blog.html");
var blogposts = blogdocument.getElementsByClassName("blogpost");
If it's on the same domain, you can make a network request to get the text of the response back, then send it through DOMParser to construct a document from the text:
fetch('./blog.html')
.then(res => res.text())
.then((result) => {
const doc = new DOMParser().parseFromString(result, 'text/html');
const posts = doc.querySelectorAll('.blogpost');
// ...
})
// .catch(handleErrors);
Just wanted to add some suggestions to the answer
const doc = new DOMParser();
You may not want to use const
Because you should use
doc = null;
to actively release memory after you done with it
DOMParser is very expensive
I have encountered serious performance issues because I didn't do it
DOM Parser Chrome extension memory leak
An alternative to a fetch or AJAX request is to load an iframe with the source set to the URL, then read from its contentWindow, and then remove it from the DOM.
var desiredPage = "www.google.com";
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", desiredPage);
document.body.appendChild(ifrm);
setTimeout(function() {
console.log(ifrm.contentWindow.document.getElementsByTagName("somestuff"));
ifrm.remove();
}, 100);
I have received a PDF from a server in which the user often wants to print without really looking at it. I try to use an onafterprint event to close the window, however, it foes not seem to get triggered when I open a PDF this way. If I instead set the URL blank to open an empty page it seems to work just fine.
let url = URL.createObjectURL(blob);
let printWindow = window.open(url);
printWindow.onafterprint = function(){
console.log("afterprint")
};
Your code won't get executed since the pdf window MIME type is "application/pdf", not "text/html".
Check this one for more details.
https://stackoverflow.com/a/51735450/1141936
I am using Chrome 79.
I am trying to start download of an image within a html page. The image is located on the same server as the webpage, but it is served via nginx server via different port. This apparently gets me to cross-origin security problems.
First I tried to use the standard
var a = document.createElement('a');
a.download = "file.bmp";
a.href = "http://xxxxxxx/xxx/somefile.bmp";
document.body.appendChild(a);
a.click();
a.remove();
Interestingly this gets me to the behaviour that my image is displayed in a new tab, but not downloaded. I assume this is due to cors reasons?
After reading discussion on this topic in :
Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?
I tried to use the approach presented there using the fetch function. Unfortunatelly this does not solve my problem. I get a response with "opaque" type and my blob is undefined...
var url = "http://xxxxxxxxx/xxx/somefile.bmp";
fetch(url, {
mode: 'no-cors'})
.then(function(response){handleBlob(response);})
.catch(e => console.error(e));
-------
function handleBlob(response)
{
var blob = response.blob;
var blobUrl = URL.createObjectURL(blob);
var ImageTest = document.getElementById("DummyLink");
ImageTest.download = "file.bmp";
ImageTest.href = blobUrl;
ImageTest.click();
}
I thought this is all very strange - the server name of the resource is same as of the webpage, so I would assume there is no real security danger here...
Any suggestions or workarounds on how to trigger a download of an image to the disk would be greatly appreciated.
Not 100% sure what your trying to do.
var url = 'http://webpage.com/images/images.jpg',
var img = document.createElement('img');
img.src = src;
document.getElementById("DummyLink").appendChild(img);
I've been researching and i did not found anything about that.
I need a chrome application that will run on Chrome OS be able to download a file (image, mp3, video, etc) and then display the content as HTML.
I mean if the app download a video, then play it on a video tag. The same for a image...download it and display on img tag.
Thanks!!
I also worked with this issue, here a working example of saving to filesystem + showing on screen:
var video = document.getElementById("video");
fetch('http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
video.src = objectURL;
var config = {type: 'saveFile', suggestedName: chosenEntry.name};
chrome.fileSystem.chooseEntry(config, function(writableEntry) {
writeFileEntry(writableEntry, myBlob, function(e) {
output.textContent = 'Write complete :)';
});
});
})
See Chrome App documentation on Handling external content. It provides a good overview.
A short version:
Declare the origins you're going to access in the manifest.
Fetch the resource via XHR (or, indeed, Fetch API).
Use the response as a blob: (you can plug it into a <video src="...">, for instance).
Optionally, save the resource locally.
In my web application I have supported user to upload any type of document (.png, .jpg, .docx, .xls, ... ) I'm trying to implement download functionality for these documents.
In Google Chrome if you click on Download link Save dialog is shown for all above documents.
In Mozilla Firefox for docx and xls works fine, Save dialog is shown but for .png and .jpg download tag is not working as expected i.e., download dialog or Save dialog does not appear, it directly open that image.
My code:
Download
I have tried almost all solutions mentioned on stackoverflow and suggested by Google. But most of them says that 'check firefox version' and other changes like:
try adding the element to the DOM before triggering the click
Remove filename from download tag it is of boolean type and etc.
I have also tried w3schools lesson on anchor tag and download attribute but nothing seems to be working.
My Mozilla Firefox version is: 38.0.5
P.S.: in chrome as well as in firefox .docs, .xls, .pdf documents work fine, problem is for .png and .jpg in firefox.
Firefox will handle png and jpeg using default handling, which is to inline them in the document. When clicking a link, even if download attribute is defined, seem to make Firefox think it has a new image ignoring the download aspect of it. This may be a temporary bug.
Here is a way, admittedly not super-elegant, to get around this problem forcing the image to be interpreted as an octet-stream.
It does not work inline on Stackoverflow so you have to test it on jsFiddle.
The code does the following:
Scans the document for a-tags.
Those which has data-link set will have a common click-handler attached.
When clicked the link is extracted from the data-link attribute (href is se to #), loaded as an ArrayBuffer via XHR (CORS requirements applies, not a problem in this case), and is converted to an Object-URL with the Blob set to mime-type octet/stream
The Object URL is set as window.location to redirect to this binary data which will make the browser ask user to download the file instead.
var links = document.querySelectorAll("a"), i = 0, lnk;
while(lnk = links[i++]) {
if (lnk.dataset.link.length) lnk.onclick = toBlob;
}
function toBlob(e) {
e.preventDefault();
var lnk = this, xhr = new XMLHttpRequest();
xhr.open("GET", lnk.dataset.link);
xhr.responseType = "blob";
xhr.overrideMimeType("octet/stream");
xhr.onload = function() {
if (xhr.status === 200) {
window.location = (URL || webkitURL).createObjectURL(xhr.response);
}
};
xhr.send();
}
Example tag:
Click to download
The drawback is that you'll loose the extension in the filename.
This is also possible to do using a Data-URL, but a data-url has a 166% overhead compared to using ArrayBuffer and a blob.
I had a similar problem with firefox not handling the download attribute, even for same-domain files.
My target files are actually hosted on AWS, so they are cross-domain. I got around this with a same-domain endpoint that downloads the remote file and pipes it to the client.
const express = require('express')
const {createWriteStream} = require('fs')
const downloadVideo = (url) => { return new Promise((resolve, reject) => {
const filePath = `/tmp/neat.mp4`
const ws = createWriteStream(filePath)
request(url, {}, (error, response, body) => {
if(error) { return reject(error) }
resolve(filePath)
}).pipe(ws)
})}
app.get('/api/download', async (req, res) => {
const videoPath = await downloadVideo(req.query.url)
res.sendFile(videoPath)
})
On the client, I send the file path to the download endpoint to get a blob back, which is then converted to an object url. From there, it's standard download attribute stuff.
async download(remoteFilePath){
const a = document.createElement('a')
const dlURL = `/api/download?url=${encodeURIComponent(remoteFilePath)}`
const blob = await fetch(dlURL).then(res => res.blob())
a.href = URL.createObjectURL(blob)
a.setAttribute('download', 'cool.mp4')
document.body.appendChild(a)
a.click()
a.remove()
}
As you are using HTML5 attribute, each browser handling differently. So use https://github.com/dcneiner/Downloadify for client side forceful download instead of viewing in browser.