Auto show print dialog on attachment open - javascript

i have a requirement. on click of a link, an attachment should open up in a new window (using window.open() ). The attachment is ideally a pdf file which resides on web server virtual directory(using IIS 7 for testing).
The input to the pdf attachment is generally a url, such as-
http://localhost/attachments/sample.pdf
The pdf open up fine but then the page should automatically show the print dialog to the user. The problem is -
1. the attachments are of different sizes.
2. Attachments loading time is variable depending upon its size.
I have tried the following-
1. 'onload' event for body/iframe.
2. jQuery load function to track the loading of the file.
3. $.get operation by enabling CORS on my requested content.
but none of them worked.
here's what i have tried-
var dom = window.open( '', '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
dom.document.writeln('<html><title>Attachment</title><head>');
dom.document.writeln('<script type=\'text/javascript\' language=\'javascript\' src=\'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js\'><\/script>');
dom.document.writeln('<script type=\'text/javascript\' language=\'javascript\'>' );
dom.document.writeln('$(document).ready(function() { /*load/get function goes here */});');
dom.document.writeln('<\/script>')
dom.document.writeln('</head><body><iframe width="100%" height="100%" id="container" type="application\/pdf" src="http://localhost/attachments/sample.pdf"></iframe></body></html>');
dom.document.close();
Is there any way possible to track the loading of the attachment because i am completely out of options now?

If you can modify the PDFs themselves, you can add a print function to the file itself which would work around the issue of tracking when the iframe is loaded.

Related

Download html window object with JS

i have this iframe here, and i want to doanload the window page with pdf inside, js function print() only shows the page, i want to download it automatically, bellow is the full code (i tryed with jspdf too).
<iframe id="conteudoIframe" src="https://eproc.trf4.jus.br/eproc2trf4/controlador.php?acao=acessar_documento_publico&doc=41625504719486351366932807019&evento=20084&key=0562cc6eddee0cc4a81dd869f92328dceab34deeaa59f4a33c43da6361cf42d6&hash=08920b364dc8433ad071d6b10c7e3817" name="superior" width="100%" height="560px"></iframe>
<script>
downloadPdfFromIframe();
function downloadPdfFromIframe() {
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js';
document.head.appendChild(script);
script.onload = () => { setTimeout(download(), 20000); };
function download() {
var myIframe = document.getElementById("conteudoIframe").contentWindow;
myIframe.focus();
myIframe.print();
myIframe.close();
var pdf = new jsPDF();
pdf.fromHTML(myIframe);
pdf.save('test.pdf');
return false;
}
}
</script>
Iframes are only a window to remote objects thus while viewing they are showing both the already downloaded html surround and the already downloaded PDF but the PDF is independent It may be downloaded before or after the frame, you can see the pdf behind the print html dialog. So the PDF is in a different application as seen in the second browser view of your HTML.
Thus you have to save/print either one at a time. Frame object or Pdf object, to get both is not impossible, just needs to be done with a suitable application (not browser). So just like here I have ScreenShots, those canvases can be easily saved or printed as PDF.
A Chrome based Browser viewing the iFrame for printing
A Firefox based Browser viewing the iFrame to print using any other method like open in a second application window.
If you need to download the two parts outside a browser then use two Download Commands so here is my.pdf
curl -o my.pdf "https://eproc.trf4.jus.br/eproc2trf4/controlador.php?acao=acessar_documento_implementacao&doc=41625504719486351366932807019&evento=20084&key=0562cc6eddee0cc4a81dd869f92328dceab34deeaa59f4a33c43da6361cf42d6&hash=08920b364dc8433ad071d6b10c7e3817&termosPesquisados="

how to display content instead of download as a file when firing GET Request?

I have a webpage which will display API response in tabular format. I developed this using Angular Js, Sevlets, Java- Rest Assured framework.
Each record in the table has a link to a log file which is an url coming as rest api response.
When I give it as an anchor tag and when I click it from the UI a file is getting downloaded instead of openning in a popup window.
My question here is how can I get the data from url instead of download it as file when user clicks on the link.
<td> <a ng-href="{{item.outputuri}}" target="_blank">Click Log
</a>
</td>
I have read several posts and got to know that we need to set content disposition at server side. But Its not possible so I want to handle it from Client side.
Thanks in advance.
Instead of trying to going to a separate url, how about displaying the content directly on the same page? You can display the content by dynamically creating an IFRAME element and inserting into host directly on your page.
The displayContent method below requests the url and then passes the content to createIframe. That method will create the IFRAME element and write the content to it. I added the base element to the content to make sure any relative links are rendered correctly.
this.displayContent = function(url) {
$http.get(url).then(res => this.createIfram(url, res.data, this.hostElem);
}
this.createIframe = function(baseUrl, content, appendToElem) {
var iframe = document.createElement('iframe');
iframe.className = 'content';
appendToElem.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<base href="' + baseUrl + '" />');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
// do some other processing on the document
}

How to create Android Service Without interval in Appcelerator/titanium Android?

I want to create a service in appcelerator android where it starts when i click a download button and stops only if download is interrupted/fails or network is not present.
How can i achieve it? I have referred this article
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Android.Service
I am following this http://docs.appcelerator.com/platform/latest/#!/guide/File_Uploads_and_Downloads for downloading content (videos)
The other problem i face is ,i can't access the UI or the UI becomes almost non responsive, though i can scroll up and down. when download is in progress on android. This is what the UI looks like and i call a function on click of download button.
NOTE: Each element,light gray rectangle is like an accordian control, which toggles(expands and retracts) on click.
I have written a code like this in a videoDownloader.js file
function downloadVideos(video_download_url){
var xhr = Titanium.Network.createHTTPClient({
onload: function() {
// first, grab a "handle" to the file where you'll store the downloaded data
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'video.mp4');
f.write(this.responseData); // write to the file
timeout: 10000
});
xhr.open('GET',video_download_url);
xhr.send();
}
You might want to look into this module which handles everything for you.

bookmarklet that works on 2 pages

I'm using a bookmarklet to inject javascript into a webpage. I am trying to login into my gmail account(that part works) and in my gmail account automatically click Sent folder as the page loads. This is the starting page:
This is the code I am using in bookmarklet:
javascript:
document.getElementById('Email').value='myEmail#gmail.com';
document.getElementById('next').click();
setTimeout(function(){
document.getElementById('Passwd').value='myPassword';
document.getElementById('signIn').click();},1000);
setTimeout(function(){
document.getElementsByClassName("J-Ke n0 aBU")[0].click();
},6000);
J-Ke n0 aBU is the class of Sent folder. This code logins into my account, but it doesn't click Sent folder.
I noticed similar behavior on other websites; whenever a new page loads or refreshes, the bookmarklet stops working.
Why is that and what is the correct way of using the same bookmarklet on different page than it was originally clicked.
Disclaimer: I don't have gmail, so I didn't test this for gmail specifically.
This answer exists to address your comment:
What about iframes. Is theoretically possible to use gmail login in an iframe and therefore when the iframe changes to another page this doesnt have effect on the bookmarklet?
Yes, it is technically possible to have a persistent bookmarklet using iframes (or, deity forbid, a frameset).
As long as your parent window (and it's containing iframe) remain on the same domain, it should work according to cross-domain spec.
It is however possible (depending on used method) to (un-)intentionally 'counter-act' this (which, depending on used counter-action, can still be circumvented, etc..).
Navigate to website, then execute bookmarklet which:
Creates iframe.
Sets onload-handler to iframe.
Replaces current web-page content with iframe (to window's full width and height).
Set iframe's source to current url (reloading the currently open page in your injected iframe).
Then the iframe's onload-handler's job is to detect (using url/title/page-content) what page is loaded and which (if any) actions should be taken.
Example (minify (strip comments and unneeded whitespace) using Dean Edward's Packer v3):
javascript:(function(P){
var D=document
, B=D.createElement('body')
, F=D.createElement('iframe')
; //end vars
F.onload=function(){
var w=this.contentWindow //frame window
, d=w.document //frame window document
; //end vars
//BONUS: update address-bar and title.
//Use location.href instead of document.URL to include hash in FF, see https://stackoverflow.com/questions/1034621/get-current-url-in-web-browser
history.replaceState({}, D.title=d.title, w.location.href );
P(w, d); //execute handler
};
D.body.parentNode.replaceChild(B, D.body); //replace body with empty body
B.parentNode.style.cssText= B.style.cssText= (
F.style.cssText= 'width:100%;height:100%;margin:0;padding:0;border:0;'
) + 'overflow:hidden;' ; //set styles for html, body and iframe
//B.appendChild(F).src=D.URL; //doesn't work in FF if parent url === iframe url
//B.appendChild(F).setAttribute('src', D.URL); //doesn't work in FF if parent url === iframe url
B.appendChild(F).contentWindow.location.replace(D.URL); //works in FF
}(function(W, D){ //payload function. W=frame window, D=frame window document
alert('loaded');
// perform tests on D.title, W.location.href, page content, etc.
// and perform tasks accordingly
}));
Note: one of the obvious methods to minify further is to utilize bracket-access with string-variables for things like createElement, contentWindow, etc.
Here is an example function-body for the payload-function (from above bookmarklet) to be used on http://www.w3schools.com (sorry, I couldn't quickly think of another target):
var tmp;
if(D.title==='W3Schools Online Web Tutorials'){
//scroll colorpicker into view and click it after 1 sec
tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;
tmp.focus();
tmp.scrollIntoView();
W.setTimeout(function(){tmp.click()},1000);
return;
}
if(D.title==='HTML Color Picker'){
//type color in input and click update color button 'ok'
tmp=D.getElementById('entercolorDIV');
tmp.scrollIntoView();
tmp.querySelector('input').value='yellow';
tmp.querySelector('button').click();
//click 5 colors with 3 sec interval
tmp=D.getElementsByTagName('area');
tmp[0].parentNode.parentNode.scrollIntoView();
W.setTimeout(function(){tmp[120].click()},3000);
W.setTimeout(function(){tmp[48].click()},6000);
W.setTimeout(function(){tmp[92].click()},9000);
W.setTimeout(function(){tmp[31].click()},12000);
W.setTimeout(function(){tmp[126].click()},15000);
return;
}
above example (inside bookmarklet) minified:
javascript:(function(P){var D=document,B=D.createElement('body'),F=D.createElement('iframe');F.onload=function(){var w=this.contentWindow,d=w.document;history.replaceState({},D.title=d.title,w.location.href);P(w,d)};D.body.parentNode.replaceChild(B,D.body);B.parentNode.style.cssText=B.style.cssText=(F.style.cssText='width:100%;height:100%;margin:0;padding:0;border:0;')+'overflow:hidden;';B.appendChild(F).contentWindow.location.replace(D.URL)}(function(W,D){var tmp;if(D.title==='W3Schools Online Web Tutorials'){tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;tmp.focus();tmp.scrollIntoView();W.setTimeout(function(){tmp.click()},1000);return}if(D.title==='HTML Color Picker'){tmp=D.getElementById('entercolorDIV');tmp.scrollIntoView();tmp.querySelector('input').value='yellow';tmp.querySelector('button').click();tmp=D.getElementsByTagName('area');tmp[0].parentNode.parentNode.scrollIntoView();W.setTimeout(function(){tmp[120].click()},3000);W.setTimeout(function(){tmp[48].click()},6000);W.setTimeout(function(){tmp[92].click()},9000);W.setTimeout(function(){tmp[31].click()},12000);W.setTimeout(function(){tmp[126].click()},15000);return}}));
Hope this helps (you get started)!
As JavaScript is executed in the context of the current page only, it's not possible to execute JavaScript which spans over more than one page. So whenever a second page is loaded, execution of the JavaScript of the first page get's halted.
If it would be possible to execute JavaScript on two pages, an attacker could send you to another page, read your personal information there and send it to another server in his control with AJAX (e.g. your mails).
A solution for your issue would be to use Selenium IDE for Firefox (direct link to the extension). Originally designed for automated testing, it can also be used to automate your browser.

Using jquery/javascript to check if pdf is embedded or send to download

I'm working on some old legacy ASP code where users can upload/attach multiple files. The files are stored in a database and upon request (clicking a link to displayattachment.asp?attachmentGuid=....) the attachment should be shown/downloaded. Like on Attempting to view pdf file though iframe using jQuery modal popup the displayattachment.asp page set header
Content-Disposition: inline; filename="somefile.ext"
On the client side I have a jquery dialog with an iframe:
function DisplayAttachmentWindow(sAttachmentGuid) {
$("#attachmentDiv").dialog({
close: function () {
$("#attachmentDiv").empty();
},
modal: true,
height: 800,
width: 1400,
open: function () {
$(this).html('<iframe src="displayattachment.asp?AttachmentGuid=' + sAttachmentGuid + '" style="width:100%; height:100%;" id="attachmentIframe"></iframe>');
}
});
return false;
}
and then:
<div style="width:100%; height:100%; overflow: hidden;" id="attachmentDiv" title=""></div>
What I want to do is the following:
If the file (eg. picture or pdf) is displayed in the dialog everything is fine.
If the file is to be downloaded (like my IE 10 does for pdf's and all browsers do for word/excel files), the dialog should close again imidiately or maybe not even be displayed at all (I think that is impossible).
I have tried an onLoad handler on the iframe, but that is not fired in IE. I have also tried accessing $("#attachmentIframe").contents() manually (using console) to see if the file was embedded, but that gives me an error in firefox
Error: Permission denied to access property 'document'
Does anyone know any way to check if the file was displayed by the browser (or plugin) or simply downloaded?

Categories