How to view a doc/pdf file in grails application? - grails

I am a grails beginner, and finding a way to view the doc/pdf files in the view. I tried embedding the file but got no output for it. How can i view the file?

Assuming that you don't just want to link to some other file on your server (if you do, Rahul's answer is perfectly fine) then you may want to consider something like this in a controller:
def retrieveFile() {
File fileToReturn = new File("${params.filePath}")
String filename = "whatever your filename is"
byteOutput = fileToReturn.readBytes()
response.setHeader("Content-disposition", "attachment; filename=\"${filename}\"");
outputStream << byteOutput
}
Then link to that (g.createLink or whatever) with the appropriate file path.

Add <embed> or <object>tag in your gsp file
<embed> tag Example:
<embed src="http://example.com/your-file.pdf" width="800" height="500" type='application/pdf'>
<object> tag Example:
<object width="800" height="500" type="application/pdf" data="http://example.com/your-file.pdf">
<p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
Above code tested and working with chrome and Firefox.
Basically there are many solutions, where you can you third party plugins and or using <iframe>
Thanks, Hope it helps you

Related

Resource interpreted as Document but transferred with MIME type application/pdf

See the following code:
Controller:
public ActionResult GetPDF()
{
byte[] pdf = GetPdfFromDatabase();
return new FileContentResult(reportData, "application/pdf");
}
View:
<iframe src="#Url.Action("GetPDF","Account")" width="600" height="500"></iframe>
Javascript Console:
Each time you load a page, show this warning !!!
An iframe requests the resource mentioned in src attribute with a content type text/html. So this message only says "I requested html but server responded with pdf"
I believe the warning can't be ignored.
An alternative I found to this problem, use the object tag, like this:
<object data="your-data-base-64" type="application/pdf"></object>
and if you using angularJS, to prevent error on console do:
<object ng-attr-data="your-data-base-64" type="application/pdf"></object>
For who come across this topic. (Me too.) For best solution is you need to create HTML page to act as iframe landing page to show PDF content.
This is example html. I just extract from chrome.
<html><body style="background-color: rgb(38, 38, 38); height: 100%; width: 100%; overflow: hidden; margin: 0px;"><embed width="100%" height="100%" name="plugin" id="plugin" src="your_pdf_url" type="application/pdf"></body></html>
Just replace your_pdf_url to your real url. I just add this html as middleware in Laravel and show this HTML so Chrome will not warning anymore. You can use this html as base and create better pdf landing page such as custom loading.

PDF is not display in safari i-Pad

Inside my asp.net MVC web application i need to display pdf in safari browser in iPad. my code is like this.
<object data="#Model.StringPdfUrl" type="application/pdf">
<embed src="#Model.StringPdfUrl" type="application/pdf" />
</object>
Does anybody know about the fix for this issue.
Thank you in advanced
I wonder if this is not the same issue I once had with Internet Explorer.
Even with the latest IE 11, if the url doesn't end with the extension .pdf (which was the case with my MVC app: the url was like /File/Download/4587), then IE plug-in could not render the PDF file. Same issue with <embed>.
I tried the iframe solution, but on some computers the document opened up in a new window.
In the end, the solution I implemented was to convert each page of the PDF document into an image with GhostscriptSharp, and then to render the document online as images in an HTML page (with navigation controls to go to first/previous/next/last page).
I Found a solution.
I used iframe to render pdf in safari
if (Request.Browser.Type.Contains("Safari"))
{
<iframe src="#Model.StringPdfUrl" height="750" width="600" frameborder="0" id="myiframe" ></iframe>
}
else
{
<object height="750" width="600" data="#Model.StringPdfUrl" type="application/pdf">
<embed src="#Model.StringPdfUrl" type="application/pdf" />
</object>
}

Primefaces p:media not showing youtube video

I have a primefaces p:media component
<p:media id="youTubeMedia" value="#{graffiticontroller.selectedYouTubeURL}" width="405" height="144" player="flash" />
the generated html is
<object height="144" width="405" data="http://www.youtube.com/watch?v=yY0PBoDlHMI" type="application/x-shockwave-flash">
the problem is that when the url is like http://www.youtube.com/watch?v=yY0PBoDlHMI , the youtube video does not show up . I just see a white box.
but if I alter the url to be http://www.youtube.com/v/yY0PBoDlHMI the video shows up.
Please help
I resolved it reading this post http://forum.primefaces.org/viewtopic.php?f=3&t=346
I copied the top link of my youtube video and applied some format.
For example if this is the original link of your video https://www.youtube.com/watch?v=fJ9rUzIMcZQ.
The first thing you need to do is to replace "watch?" by "/" also you have replace the following "=" by "/" at the end you append this text to your link:
&hl=en&fs=1&
At the end you will get a link like this:
https://www.youtube.com/v/fJ9rUzIMcZQ&hl=en&fs=1&
And now you can use your p:media
<p:media value="https://www.youtube.com/v/fJ9rUzIMcZQ&hl=en&fs=1&" width="600" height="" player="flash"/>
put url in this way http://www.youtube.com/watch/v/yY0PBoDlHMI It will work...

Using Url.Content with semi-relative URL

I am storing the location of images in my database in an MVC application...but i am only storing part of the location. For example:
/headers/image1.jpg
/headers/image2.jpg
The images are actually stored in the following folder:
~/content/images/headers/image1.jpg
~/content/images/headers/image1.jpg
In my view, I want to do something like this:
<img src="#Url.Content("~/content/images") + Model.ImageUrl" />
How can I do this?
Just do it!
<img src="#Url.Content("~/content/images" + Model.ImageUrl)" />
UPDATE:
As of ASP.NET MVC 4 it is valid to use the tilde URLs directly in HTML as the Razor View Engine will parse the URLs. Like this:
<img src="~/content/images/#Model.ImageUrl" />
You can write extension method which combine your ImageUrl with configured path to content directory.
<img src="#Model.ImageUrl.ToRelative()" alt="#Model.ImageAlt" />
PS
Remember about alt tag. ;)

How to upload vimeo videos using Media plugin (and not HTML option)

I'm working on Ruby on Rails 2.3.8 and the last version of rails tinyMCE plugin.
I would like users to have the ability of adding all kind of videos into the text editor. As it's now, they can add Youtube videos, and also they can upload them from their computer.
The problem is that Vimeo videos don't only create a common HTML <object> code, but they create an iframe for them, and if I try to import one of them using the Media plugin, I'll have to paste this video for example: http://vimeo.com/16430948, and it will generate the following HTML (which won't work):
<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>
While Vimeo videos need the following HTML for being displayed:
<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>
Now, which is the difference between this two generated HTML? It's that the iframe is missing in the first code I've posted, so it doesn't work.
So, the question is: how do I add that iframe to the tinyMCE programmability so it's automatically added when a Vimeo video is embedded?
Well, you should write your own plugin (it is pretty simple) to check for changes the user made.
When a user entered a vimeo link you just grab the relevant content from the editor and put it into a new element (an iframe).
Your code should look something like this (you will have to modify it, but i am sure you will get the right direction):
// you may choose an other event to check for
ed.onChange.add(function(ed){
var body = ed.getBody();
// check for vimeo using jquery object
$(body).find('param').each(function(index, Element){
// vimeo adress is found in value
if (this.value.search('http://vimeo.com') == -1) return;
var node = this;
var iframe_not_parent = 1;
while(node.nodeName !== 'body'){
node = node.parentNode;
if (node.nodeName !== 'iframe'){
iframe_not_parent = 0;
break;
}
}
// ok, this vimeo thing is not inside an iframe - put it inside
if (iframe_not_parent){
with(document.getElementById(iframe_id).contentWindow){
var new_iframe = document.createElement("iframe");
this.parentNode.parentNode.append(new_iframe);
new_iframe.append(this.parentNode);
}
}
});
});

Resources