uploading two files with JSF results in two times the same file - jsf

I have a JSF page + Bean to upload a file and preview the result (it's for images). In the bean the upload method puts the data (base64) in a list and the JSF page loops through the list to display the images.
So far it works as expected for the first image. But when I upload a second image there are two things that might go wrong:
the first image gets uploaded again instead
Or, with a little change in the code the second image does not get uploaded at all until I reselect the file again and upload it.
JSF page
<h:form enctype="multipart/form-data" id="uploadForm" prependId="false">
<!-- here I loop through the list to preview the images -->
<c:forEach var="image" items="#{bean.imageList}">
<h:graphicImage value="#{image}" />
</c:forEach>
<!-- that's the upload -->
<h:inputFile id="file" value="#{bean.uploadedFile}" />
<h:commandButton value="submit" action="#{bean.uploadFile}" />
</h:form>
bean
private Part uploadedFile; // the Part with the uploaded file
private ArrayList<String> imageList; // the list of images (base64 encoded)
public void uploadFile() throws IOException{
if(null != uploadedFile){
String imageType = "data:" + uploadedFile.getContentType() + ";base64,"; // will be something like: "data:image/png;base64,"
InputStream inputStream = uploadedFile.getInputStream(); // getting the inputStream from the Part
byte[] imageData; // array to but the image data
try(BufferedInputStream bis = new BufferedInputStream(inputStream)){ // converting the inputStream to a buffered one
imageData = new byte[bis.available()]; // initializing the byte array with the right size
bis.read(imageData); // reading / writing the image data
// HERE: if I comment out the next line, the second upload will upload the first image again.
// but if I set the Part to null, the second upload will result in nothing (page reloads, no data uploaded) and I have to upload it again
uploadedFile = null;
}
imageList.add(imageType + javax.xml.bind.DatatypeConverter.printBase64Binary(imageData)); // this adds the base64 image string to the list of images
}
}
My bean is #ViewScoped (I need it to be that way for other things).
So my guess was that the Part uploadedFile just didn't get the new image data for the second file, but as I said, when setting it to null it just skips the second upload process.
Does anyone see what I am doing wrong?

You might try the following.
byte[] imageData = new byte[uploadedFile.getSize()];
try (BufferedInputStream bis = new BufferedInputStream(inputStream)) {
bis.read(imageData);
uploadedFile.delete();
}
Using Part.getSize()
Not relying on available() which makes no guarantee that all is available
Using delete() to clear the bean
(Not tried it myself.)

Related

Crop image and send it to jsf bean without unnecessary data transfer

I'd like to upload an image generated by a jquery cropper to a bean field.
Client side I ve found this:
<p:fileUpload
id="imgInp"
mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
<img id="blah" src="#" alt="your image" />
<p:imageCropper image="" />
<script>
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
function readURL(input) {
if (input.files && input.files[0]) {
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
It displays the image without uploading it but I can't get it in the cropper. So I use a jquery cropper but then I'm not sure how to get it in the bean (without going through servlets, because it's not a one time use). In other words I need to send an img through ajax to the bean.
Otherwise I'd use primeface but it has to go through the wire which I'd like to avoid if possible. From the example I've seen the image is static content on the server. Do I really have to save the image on the server ? Can't I keep it as object and convert the UploadedFile to something the cropper will accept ?
Soomething like this:
<p:fileUpload
mode="advanced" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
fileUploadListener="#{bean.uploadPicListenner}"
update="cropper"/>
<h:panelGroup id="cropper" >
<p:imageCropper image="#{bean.img}"/>
</h:panelGroup>
public void uploadPicListenner(FileUploadEvent e) {
img = e.getFile();
RequestContext.getCurrentInstance().update("ptform:cropper");
}
It's actually quite simple once the process is understood despite some misleading answers that can be found online. I hope this is gonna help someone in the future.
The technique I used is to :
Pick image
Once image is picked, display it in a cropper without sending it through the wire.
Here there are a few option and I choosed to : When user moves the cropper rectangle around, the coordinates of the rectangle populate an hidden input field.
Send the coordinate to bean and crop it on server side.
I did it this way because the cropper jquery lib I wanted to use didn't transform the image to base 64 and just gave the coordinates of a rectangle. However if someone want to send the cropped image directly in the future I figured it would be really easy. Just like I did except you have to put the cropped image as string base 64 in a hidden input text (instead of rectangle coordinates - this is explained under-) and transform it back on the server side, that's all. (I don't know how efficient / secure that is however). At least that resolved my issue I had with primefaces, which was not wanting to send unnecessary data over the wire multiple times.
1. First let's display the image without sending it to the server.
At this point when the image is displayed if you check inside the src tag of the img you will see that it is the data of the image as base 64:
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wCEAAYEBQYFBAYGBQ...
<h:form id="lolo" enctype="multipart/form-data">
<p:fileUpload
value="#{adminCreateTeam.teamImg}"
mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
<img id="blah" src="#" alt="your image" />
</h:form>
<script>
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
function readURL(input) {
if (input.files && input.files[0]) {
reader.readAsDataURL(input.files[0]);
}
}
$("#lolo\\:imgInp").change(function(){
readURL(this);
});
</script>
Once we have done that it becomes a bit dependent on the jquery cropping library used. I used the cropper lib. With that one we want to have the coordinate of the cropped rectangle. With the coordinates data we populate an hidden input and send it back to the bean to then recrop it on java side.
Alternatively a better solution (imo) would be to use a library that crop the image and give the data client side as base 64, populate an hidden field and send it back to the bean, to then convert base 64 to an image. Each of these steps is quiet easy and can be found on stackoverflow.
Since I wanted to use the cropper library I did it the first way:
This is added inside the form:
<h:inputHidden value="#{adminCreateTeam.rect}"/>
<p:commandButton value="submit" action="#{adminCreateTeam.picTest}" ajax="false"/>
This is the updated onload:
// with this the hidden field is gonna be populated by the
// cropping rectangle data.
var $imageCrop = $('#blah').cropper({
aspectRatio: 1/1,
viewMode: 1,
crop: function(e) {
// Output the result data for cropping image.
// string with all the data delimited by /
$('#lolo\\:hiddenB64').val(e.x + '/' + e.y + '/' + e.width + '/' + e.height);
}
});
//So the image changes in the cropper when a new image is picked
reader.onload = function (e) {
$imageCrop.cropper('replace',e.target.result);
}
We crop the image on with java
public void picTest() {
//getting coord.
String data[] = rect.split("/");
try (InputStream in = new ByteArrayInputStream(teamImg.getContents())) {
BufferedImage bImageFromConvert = ImageIO.read(in);
// line under this crops. It's possible there is a zoom to figure out, I didn't check yet. Seemed correct on first and only try. In any case you'll figure it out
// surely the parsing shouldn't be here but I need to sleep real bad.
BufferedImage dest = bImageFromConvert.getSubimage((int)(Double.parseDouble(data[0])), (int)(Double.parseDouble(data[1])),
(int)(Double.parseDouble(data[2])), (int)(Double.parseDouble(data[3])));
// path to the folder
Path folder = Paths.get(dirs.getString("imgTeams"));
String filename = "team_pic";
String extension = FilenameUtils.getExtension(teamImg.getFileName());
Path file = Files.createTempFile(folder, filename + "-", "." + extension);
ImageIO.write(dest, "jpeg", file.toFile());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

Show error and change doneLabel of rich:fileUpload in upload listener method

I have to upload CSV file and I have to validate some values of file, for example does not allow negative value. Then, I need validate it and that file does not apear like "done" or "uploaded". I need handle an error on display it.
<rich:fileUpload
fileUploadListener="#{configClientBean.listener}"
ontyperejected="alert('some error');"
maxFilesQuantity="1"
onuploadcomplete="#{rich:component('waitPanelInterno')}.hide();"
onfilesubmit="#{rich:component('waitPanelInterno')}.show();"
render="pnlMensajes, idTableClients, scrollRegistros, outputPanelDetalle"
autoclear="true">
<rich:message for="uploadConfigClient" />
<a4j:ajax event="uploadcomplete" execute="popupFileLoad"
render="panelCarga, pnlMensajes" />
</rich:fileUpload>
In the Backing bean I can validate some things, but I cant show errors or change the behavior of "rich:fileUpload" compoment for example doneLable can not be displayed.
public void listener(FileUploadEvent event) throws Exception {
try {
UploadedFile file = event.getUploadedFile();
ByteArrayInputStream bais = new ByteArrayInputStream(file.getData());
InputStreamReader is = new InputStreamReader(bais, getMessage("iso"));
BufferedReader bufRead = new BufferedReader(is);
while ((registro = bufRead.readLine()) != null) {
if(cvsLine[1].isEmpty()){
// stop process
// Throw error
}
}
}
Thanks for your time.
To add extra behavior to the rich:fileUpload component that is not default is by creating your own file upload component (ex. myown:fileUpload) based on the rich:fileUpload source code and the use of the Component Development Kit.
A second solution could be by adding one extra message field that is described in this post: RichFaces fileupload and h:message problem

Update doesn't work when call sendRedirect (HttpServletResponse) [duplicate]

I have a button which opens a new tab with a generated pdf-file.
However, after I click on the button, I want to navigate to another page.
That means, after clicking on the button i want to open a new tab with the pdf and navigate to another page on the initial tab. I am using primefaces p:commandButton and tried with onclick="window.location.href='www.google.de'" but it does not work. However onclick="window.lalert('www.google.de')" does work.
This is my code:
<h:form id="transForm" target="_blank">
<p:commandButton value="Zertifikat erstellen" ajax="false"
label="Speichert die Anmeldung und erstellt ein Zertifikat im PDF-Format"
action="#{transportErfassen.generatePDFZertifikat()}"/>
</h:form>
generatePDFZertifikat() does create a pdf-File with following code, I think here is the issue:
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
externalContext.setResponseContentType("application/pdf" );
externalContext.setResponseHeader("Expires", "0");
externalContext.setResponseHeader("Cache-Control","must-revalidate, post-check=0, pre-check=0");
externalContext.setResponseHeader("Pragma", "public");
externalContext.setResponseHeader("Content-disposition", "inline; filename=\"" + fileName +"\"");
externalContext.setResponseContentLength(out.length);
externalContext.addResponseCookie(Constants.DOWNLOAD_COOKIE, "true", new HashMap<String, Object>());
//setze explizit auf OK
externalContext.setResponseStatus(200);
OutputStream os = externalContext.getResponseOutputStream();
os.write(out, 0, out.length);
os.flush();
facesContext.responseComplete();
facesContext.renderResponse();
You're basically trying to send 2 responses back to 1 request. This is not ever going to work in HTTP. If you want to send 2 responses back, you've got to let the client fire 2 requests somehow. You were already looking in the right direction for the solution, with little help of JavaScript it's possible to fire multiple requests on a single event (click). Your attempt in onclick is however not valid, the change of window.location on click of the submit button, right before the form submit, completely aborts the original action of the button, submitting the form.
Your best bet is to directly navigate to the result page which in turn invokes JavaScript window.open() on page load, pointing to the URL of the PDF file which you'd like to open. It's namely not possible to send some HTML/JS code along with the PDF file instructing a navigation (as that would obviously corrupt the PDF file). This also means, that you can't return the PDF directly to the form submit request. The code has to be redesigned in such way that the PDF can be retrieved by a subsequent GET request. The best way is to use a simple servlet. You could store the generated PDF temporarily on disk or in session, associated with an unique key, and pass that unique key as request pathinfo or parameter to the servlet in window.open() URL.
Here's a kickoff example:
Initial form:
<h:form>
...
<p:commandButton ... action="#{bean.submit}" />
</h:form>
Bean:
public String submit() {
File file = File.createTempFile("zertifikat", ".pdf", "/path/to/pdfs");
this.filename = file.getName();
// Write content to it.
return "targetview";
}
Target view:
<h:outputScript rendered="#{not empty bean.filename}">
window.open('#{request.contextPath}/pdfservlet/#{bean.filename}');
</h:outputScript>
PDF servlet (nullchecks etc omitted for brevity; Java 7 assumed for Files#copy()):
#WebServlet("/pdfservlet/*")
public class PdfServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
File file = new File("/path/to/pdfs", request.getPathInfo().substring(1));
response.setHeader("Content-Type", "application/pdf");
response.setHeader("Content-Length", String.valueOf(file.length()));
response.setHeader("Content-Disposition", "inline; filename=\"zertifikat.pdf\"");
Files.copy(file.toPath(), response.getOutputStream());
}
}
As BalusC said, Refresh/navigate current page and opening downloading file are two different responses, there must be two resquests. I encountered a similar problem. I solved it with jsf ajax successfully.
Here's part of my code:
XHTML:
<h:commandButton id="download-button" class="download-button"
value="download">
<f:ajax event="click" execute="#form" render=":msg-area"
listener="#{myController.checkForDownload}" onevent="checkCallBack" />
</h:commandButton>
<h:commandButton id="download-button2" class="download-button2"
value="download" style="display: none;"
action="#{myController.download}">
</h:commandButton>
Javascript:
function checkCallBack(data) {
var ajaxStatus = data.status;
switch (ajaxStatus) {
case "begin":
break;
case "complete":
break;
case "success":
document.getElementById('download-form:download-button2').click();
break;
}
}
download-button renders a message area on page and download-button2 triggers a download method. they are two different requests. When the first request completed, the second request will be triggered.

UploadedFile is null when uploading file with <p:fileUpload mode="simple">

I need to upload an image into the server.
I'm using primefaces, here is my code:
deposit.xhtml
<h:form>
<p:fileUpload mode="simple"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
value="#{imageHandler.uploadedPicture}" />
<p:commandButton action="#{imageHandler.savefile(imageHandler.uploadedPicture)}"
value="Déposer" ajax="false" />
</h:form>
ImageHandler:
#ManagedBean (name = "imageHandler")
#RequestScoped
public class ImageHandler {
private UploadedFile uploadedPicture; // +getter+setter
public void savefile(UploadedFile uploadedPicture)
{
try {
InputStream input = uploadedPicture.getInputstream();
File folder = new File("C:\\Users\\Clyde\\Documents\\NetBeansProjects\\DSJEE\\web\\resources\\Items");
String filename = FilenameUtils.getBaseName(uploadedPicture.getFileName());
String extension = FilenameUtils.getExtension(uploadedPicture.getFileName());
File file = File.createTempFile(filename + "-", "." + extension, folder);
Files.copy(input, file.toPath());
FacesContext.getCurrentInstance().getExternalContext().redirect("index2.xhtml");
} catch (IOException ex) {
Logger.getLogger(ImageHandler.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
Concerning the trace here is the error I get, those are 3 lines that I have picked from the trace:
javax.faces.el.EvaluationException: java.lang.NullPointerException
Caused by: java.lang.NullPointerException
at ImageHandler.savefile(ImageHandler.java:43)
In other words, it's coming from here:
InputStream input = uploadedPicture.getInputstream();
I have tried many things to get rid of that error. I used savefile() without parameters, changed the scope, etc... Still can't go on. How is this caused and how can I solve it?
It will be null in the action method when the browser is unable to send the file contents along with the request body, or when the server is unable to grab the file contents from the request body.
In order to let the broswer send the file contents (and thus not only the name), you need to make sure that the request body encoding type is set to multipart/form-data. This is to be achieved by setting the enctype attribute of the form as below:
<h:form enctype="multipart/form-data">
Unrelated to the concrete problem, the below doesn't make sense:
<p:commandButton action="#{imageHandler.savefile(imageHandler.uploadedPicture)}">
You don't need to pass a bean property forth and back to the very same bean. Just let the action method access it directly.
<p:commandButton action="#{imageHandler.savefile}">
Also, the attempt to save the uploaded file in IDE project folder is a bad idea. Don't do that. Store it elsewhere. See also a.o. Uploaded image only available after refreshing the page.

Automatically open the printer dialog after providing PDF download

I am currently opening a pdf file in a new tab in my browser but I need to know how to open a printer dialog to print the pdf jasper report after pressing a commandButton
This is the method that open the pdf in a new tab:
public void printJasper() {
JasperReport compiledTemplate = null;
JRExporter exporter = null;
ByteArrayOutputStream out = null;
ByteArrayInputStream input = null;
BufferedOutputStream output = null;
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();
try {
List<String> sampleList = new ArrayList<String>();
sampleList.add("Fist sample string");
sampleList.add("Second sample string");
JRBeanCollectionDataSource beanCollectionDataSource = new JRBeanCollectionDataSource(sampleList);
Map<String, Object> reportValues = new HashMap<String, Object>();
reportValues.put("anyTestValue", "test value");
facesContext = FacesContext.getCurrentInstance();
externalContext = facesContext.getExternalContext();
response = (HttpServletResponse) externalContext.getResponse();
FileInputStream file = new FileInputStream("/any_dir/sample.jasper");
compiledTemplate = (JasperReport) JRLoader.loadObject(file);
out = new ByteArrayOutputStream();
JasperPrint jasperPrint = JasperFillManager.fillReport(compiledTemplate, reportValues, beanCollectionDataSource);
exporter = new JRPdfExporter();
exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint);
exporter.setParameter(JRExporterParameter.OUTPUT_STREAM, out);
exporter.exportReport();
input = new ByteArrayInputStream(out.toByteArray());
response.reset();
response.setHeader("Content-Type", "application/pdf");
response.setHeader("Content-Length", String.valueOf(out.toByteArray().length));
response.setHeader("Content-Disposition", "inline; filename=\"fileName.pdf\"");
output = new BufferedOutputStream(response.getOutputStream(), Constants.DEFAULT_BUFFER_SIZE);
byte[] buffer = new byte[Constants.DEFAULT_BUFFER_SIZE];
int length;
while ((length = input.read(buffer)) > 0) {
output.write(buffer, 0, length);
}
output.flush();
} catch (Exception exception) {
/* ... */
} finally {
try {
if (output != null) {
output.close();
}
if (input != null) {
input.close();
}
} catch (Exception exception) {
/* ... */
}
}
facesContext.responseComplete();
}
This is the button that open the pdf file:
<p:commandButton action="#{sampleBB.printJasper}"
ajax="false" onclick="this.form.target='_blank'"
value="#{msg['generate.report']}" />
What I need to do?
With JasperReports
When using JasperReports, simply add this parameter to JasperReports exporter:
exporter.setParameter(JRPdfExporterParameter.PDF_JAVASCRIPT, "this.print();");
This basically instructs Adobe Acrobat to execute the script this.print() when opening the PDF. See also page 79-80 of Adobe Acrobat Scripting Guide. Below is an extract of relevance:
Printing PDF Documents
It is possible to use Acrobat JavaScript to specify whether a PDF document is sent to a
printer or to a PostScript file. In either case, to print a PDF document, invoke the doc
object’s print method. [...]
Without JasperReports
If you don't have control over generation of PDFs and thus can't manipulate it to add the mentioned script, an alternative is to change all the Java/JSF code accordingly so that the PDF file is idempotently available (i.e. the PDF file must be available by just a GET request rather than a POST request). This allows you to embed it in an <iframe> for which it's in turn possible to print its content by JavaScript during onload (keep CORS in mind though).
Simply put, the enduser must be able to download the desired PDF file by just entering its URL in browser's address bar. You can of course make use of GET request query string to specify parameters, allowing a bit more dynamicness. If it's "very large" data, then you can always let JSF put it in the HTTP session or DB and then pass an unique identifier around as request parameter so that the servlet can in turn obtain it from the very same HTTP session or DB.
Whilst possible with some nasty hacks, a JSF backing bean is simply insuitable for the job of idempotently serving a non-JSF response. You'd better use a "plain vanilla" servlet for this. You'll end up with much simpler code. Here's a kickoff example of such a servlet:
#WebServlet("/pdf")
public class PdfServlet extends HttpServlet {
#Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String foo = request.getParameter("foo");
String bar = request.getParameter("bar");
// ...
// Now just use the same code as in your original bean *without* FacesContext.
// Note that the HttpServletResponse is readily available as method argument!
response.setContentType("application/pdf");
// ...
}
}
With this setup, it's available by http://localhost:8080/context/pdf?foo=abc&bar=xyz.
Once you get that part to work, then you just have to reference it in an <iframe> which uses JavaScript to print its own content window during its load event. You can do this in a JSF page, e.g. /pdf.xhtml:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<style>html, body { height: 100%; margin: 0; overflow: hidden; }</style>
</h:head>
<h:body>
<iframe src="#{request.contextPath}/pdf?#{request.queryString}"
width="100%" height="100%" onload="this.contentWindow.print()" />
</h:body>
</html>
All you need to do in your JSF backing bean is to send a redirect to that page, if necessary with parameters in request query string (which will end up in #{request.queryString} so that the servlet can obtain them via request.getParameter(...)).
Here's a kickoff example:
<h:form target="_blank">
<h:commandButton value="Generate report" action="#{bean.printPdf}" />
</h:form>
public String printPdf() {
// Prepare params here if necessary.
String foo = "abc";
String bar = "xyz";
// ...
return "/pdf?faces-redirect=true"
+ "&foo=" + URLEncoder.encode(foo, "UTF-8")
+ "&bar=" + URLEncoder.encode(bar, "UTF-8");
}
There is a <p:printer> Primefaces's component for that purpose.
Something like this might work, not tested though.
<h:form>
<h:commandButton value="Print" type="button" icon="ui-icon-print">
<p:printer target="pdf" />
</h:commandButton>
<p:media style="display:none;" id="pdf" value="/aPDF.pdf" />
</h:form>
Note :
<p:media> does have a print button to print the displayed pdf.
Edit :
You have to embed the pdf file inside an iframe and use the JavaScript print() function on it, or you can activate the auto-print function in the PDF itself. But it is definitely possible.
See this question on SO : Can a PDF file's print dialog be opened with Javascript?
How to Use JavaScript to Print a PDF
You can't print a URL directly from JavaScript, you can only open the print dialog for the existing page - article and print API.
PDF is generated on the server and sent to the web-browser (as a separate "page") which has to decide how to process it - the user is usually asked if it wants to display or save the PDF.
To "automatically print" (i.e. open a print dialog) an HTML page you would just have something like this:
window.onload = function() {
window.print();
};
But that can't be done for a PDF since it's not an HTML page.
To "automatically print" something other than an HTML page you would need to have a web-browser plug-in to handle PDFs from your server.
Another posibility is to write a GreaseMonkey user-script that would react on *.myserver.com/**.pdf and have it printed. Note: GreaseMonkey is a Mozilla Firefox plug-in.
Heavy weight option
You could accomplish your task by adding print support to your server application. Application requirements:
It would have to be an Intranet application (self-hosted inside the user's network),
Admin user would need to register network printers accessible from the server via a JSP page,
A "print dialog" page where you would select a registered printer and on clicking the "Print" button send a "print" request, for example:
/print?printer=printer1&doc=/reports/report1
I have seen a Java web application that supported this, but as you can see, it's not an easy task.
#Sujan Sivagurunathan
I tried combining the p:printer and p:media by replacing the image on the p:printer demo page with the PDF file from the p:media demo page:
// Replace this line:
<img id="j_idt18:image" src="/showcase/images/nature1.jpg?pfdrid_c=true" alt="">
// With this one:
<object **id="j_idt18:image"** style="display:none;" type="application/pdf" data="/showcase/resources/other/guide.pdf?pfdrid_c=true">Undefined</object>
When you click the Print button you get an empty page. If you omit the style="display:none;" and leave the PDF's height="300px" width="100%" you will get a small rectangle on the page print preview.
Eidt
Thank you, BalusC and Sujan. I agree, there is an option of embedding JavaScript inside the PDF, but that's usually disabled for security reasons.
I suppose the most browser-compatible and user-friendly way is to have a dedicated Print Preview pop-up window with an iframe showing the given PDF via GET request and a Print button to invoke the IFRAME's contentWindow.print().
It is generally a bad idea to just print a document without letting the user select the printer and configure it.

Resources