I've got a html form submitting to a pdf using cfdocument.
Within that pdf, I have a link at the bottom that goes to another policy. I need that link to open up on a new page, rather than _self.
I've tried using Jquery to open the window and not sure if that is even possible, but wasn't successful to say the least.
So basically, I've got.
<cfdocument format="pdf">
stackoverflow
</cfdocument>
Not possible. Case closed!
Reason:
For my purpose, I'd need to be able to open another pdf in a browser window, but in order to do that, you would have to download the second one to Acrobat or another reader you've got.
Also, you're not able to use jquery to create the new window.
PDF
Or with JQuery
PDF
$(document).ready(function(){
$('#openPdfLink').click(function(){
window.open(this.href);
return false;
});
});
Related
I've successfully integrated the FileReader() that renders a file from a BLOB so the user can view and interact with it, however the revised criteria states that the user shouldn't be allowed to download the document now.
The requirement is that the download icon is removed from the FileReader() but I can't seem to find a way of doing this, as it's baked into the actual Web API.
I started to write my own PDF viewer using a basic Vue to PDF package and adding custom controls but this is a bit of a monster and I'd like to avoid a complete re-write to remove one action.
Is there any way of removing the download CTA before it renders the PDF?
More context..
The PDF is rendered in the DOM from a BLOB that's passed via an end point I hook into with Axios. I then readAsDataURL(blob) and finally create the FileReader() result as a URL.createObjectURL(blob) to give me the data that I render as the canvas src to enable the PDF viewer. Unfortunately this can't be a PNG as it needs multi pages. Thee issue is that it's sensitive docs that can only be viewed on the portal, so it's to prevent users from easily downloading (aware they could just print screen).
For my application I need to programmatically save a copy of a webpage HTML along with the images and resources needed to render it. Browsers have this functionality in their Save page as... Webpage, complete options.
It is of course easy to save the rendered HTML of a page using phantomjs or casperjs. However, I have not seen any examples of combining this with downloading the associated images, and doing the needed DOM changes to use the downloaded images.
Given that this functionality exists in webkit-based browsers (Chrome, Safari) I'm surprised it isn't in phantomjs -- or perhaps I just haven't found it!
Alternatively the PhantomJS, you can use the CasperJS to achieve the required result. CasperJS is a framework based on the PhantomJS, however, with a variety of modules and classes that support and complement the PhantomJS.
An example of a script that you can use is:
casper.test.begin('test script', 0, function(test) {
casper.start(url);
casper.then(function myFunction(){
//...
});
casper.run(function () {
//...
test.done();
});
});
With this script, within a "step", you can perform your downloads, be it a single image of a document, the page, a print or whatever.
Take a study on the download methods, getPageContent and capture / captureSelector in this link.
I hope these pointers can help you to go further!
I want to use something along the lines of JQuery file upload (i'm open minded) in a form with lots of other fields for the UI (ex. image previews, delete, file sizes .etc), but I want to submit the files along with the form as if i used a normal HTML file field.
Is this at all possible?
If you console.log() the form after submission you will get an object in return that has a bunch of information. Among that information you can find for example file information of the file you just upload.
You can check this http://jsfiddle.net/1r0Lprkj/1/ and open your console after you've submitted the form.
Then if you want to go deeper into this, then you can check out the Javascript FileReader which lets you do a bunch of cool stuff with the uploaded file. https://developer.mozilla.org/en-US/docs/Web/API/FileReader
To answer your question; Yes it is possible to achieve without AJAX.
I'm using google's docs viewer to show a pdf document in a html page and I would like to open the document starting on page 20 instead of 1 for example.
There's hardly any documentation about Google's docs viewer service. They say in its webpage https://docs.google.com/viewer that the service only accepts two parameters (url and embedded) but I've seen other parameters searching the web, like "a", "pagenumber", "v" and "attid", none of them did anything to me. I've tried to add #:0.page.19 at the end of my url (that's the id of the div containing page number 20 inside the body google creates) but it just ignores it or works in a random way.
Do you guys know how to tell google docs viewer to show the document starting on a specific page?
I found a solution I'll post here just in case somebody is in the same situation.
Every page inside google's docs viewer iframe has an id like :0.page.X, being X the number of the page. Calling the service like this
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true#:0.page.20">
won't work (maybe because the pages ids are not yet created when the page is rendered?)
So you just have to add an onload attribute to the iframe:
<iframe id="iframe1" src="http://docs.google.com/gview?url=http://yourpdf&embedded=true" onload="javascript:this.contentWindow.location.hash=':0.page.20';">
and voilà, the iframe will automatically scroll down after loading.
Note that page indices are zero-based. If you want to view the 20th page of a document in the viewer, you would need use the parameter :0.page.19
I found these two ones :
1) just an Screenshot(Image) of specific page (without navigation):
https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true&a=bi&pagenumber=12
2) a link to specific page of PDF in IFRAME (with navigation):
<script>
var docURL='https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true';
var startPAGE=7;
document.write('<iframe id="iframe1" onload="javascript:go_to_page('+ startPAGE +')" src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"width="600" height="400" ></iframe>');
function go_to_page(varr) { document.getElementById("iframe1").setAttribute("src", docURL + '#:0.page.'+ (varr-1) );}
</script>
p.s. then you can have on your website go to page 3
For me this solution didn't work with the current version of google viewer. Link to specific page on Google Document Viewer on iPad helped me out. Use &a=bi&pagenumber=xx as additonal URL parameter.
Got it working in the imbed viewer
By changing the url with a timout function, this becous the pdf is not directly shown
$(window).load(function() {
setTimeout(function() { $('.gde-frame').attr('src', 'https://docs.google.com/viewer?url=http://yourdomain.com/yourpdf.pdf&hl=nl&embedded=true#:0.page.15'); }, 1000);
});
Just copy the imbed url and add your hash for the page (#:0.page.15 > will go to page 15)
You might want to change the language to your own &hl=nl
and for the people how have to support ie8
if you use a boilerplate like this:
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
you can change the output of the link directly to the pdf like this,
if( $("html").hasClass("ie8") ) {
$('#linkID').attr('href', 'http://yourdomai.com/yourpdf.pdf');
};
the pdf will be shown in the pdf reader from IE
My PDF is 13 pages, but when I used hash: 0.page.13, it only jumped to page 10. I had to setTimeout and call the same function again:
Only needed to do that once per page load, then it seems to be synched properly. I am sure there is a more elegant solution:
var is_caught_up = false;
function pdf_go(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
if (!is_caught_up){
setTimeout('pdf_catchup('+page+')', 500);
}
}
function pdf_catchup(page){
$('pdf_frame').contentWindow.location.hash=':0.page.'+page;
is_caught_up = true;
}
In out project we are creating a pdf by using seam pdf and storing that pdf in the database.
The user can then search up the pdf and view it in their pdf viewer. This is a small portion of the code that is generated to pdf:
<p:html>
<a:repeat var="file" value="#{attachment.files}" rowKeyVar="row">
<s:link action="#{fileHandler.downloadById()}" value="#{file.name}" >
<f:param name="fileId" value="#{file.id}"/>
</s:link>
</a:repeat>
When the pdf is rendered, a link is generated that points to:
/project/skjenkebevilling/status/status_pdf.seam?fileId=42&actionMethod=skjenkebevilling%2Fstatus%2Fstatus_pdf.xhtml%3AfileHandler.downloadById()&cid=16
As you can see this link doesnt say much, and the servletpath seems to be missing.
If I change /project with the servletpath
localhost:8080/saksapp/skjenkebevilling/status/status_pdf.seam?fileId=42&actionMethod=skjenkebevilling%2Fstatus%2Fstatus_pdf.xhtml%3AfileHandler.downloadById%28%29&cid=16
Than the download file dialog appears. So my question is, does anyone know how I can input the correct link? And why this s:link doesnt seem to work?
If I cannot do that, then I will need to somehow do search replace and edit the pdf, but that seems like a bit of a hack.
(This is running under JBoss)
Thank you for your time....
I found a workaround for this problem.
Seems I have to use s:link together with a normal a href tag.
Only having href tag doesn't work for some reason.
<s:link action="#{fileHandler.downloadById()}" value="#{file.name}" propagation="none">
<f:param name="fileId" value="#{file.id}"/>
</s:link>
<a href="#{servletPath.path}?fileId=#{file.id}&actionMethod=#{path.replace('/','')}%2Fstatus%2Fstatus_pdf.xhtml%3AfileHandler.downloadById()&">
download
</a>
The servletPath.path returns the servlet path ie http://mydomain.com/download.seam
You can decide to put login-required=true on the download.seam if you want users to login before downloading a file.
#Observer("org.jboss.seam.security.loginSuccessful")
public void servletPath() {
HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
this.path = request.getRequestURL().toString().replace("login.seam", "download.seam");
}