View a PDF file in HTML not to download it - html

I have a very simple pure html file in which I have many PDF files. I have link it like this:
PDF 1 here
When I click the link, the PDF file is downaloaded and viewed in the native Reader program. I want it to open in another window of the browser, and read it there, rather then saving a copy manually to my computer and opening it.

2018 Update
Almost all modern browsers have built-in PDF viewers. You can directly link to the PDF file and the browser will view it. You can also use an <iframe> if you want to view it inside an HTML page (e.g. with your website headers, etc.).
Another approach, but more complicated and not necessary except for very special circumstances, is to convert the PDF files to HTML (as described in #1 of the 2012 answer below).
Original Answer (Outdated, from 2012)
Viewing the PDF file in the browser (without download) requires an add-on to the client's browser. Google Chrome, for example, has a built-in PDF viewer and can open files directly, while IE and Firefox require that you install a plug-in (the one that comes with Adobe Reader).
There are two other approaches:
Convert the file to HTML, image, or any other format that can be directly viewed in the browser. This conversion can be on-the-fly using a server-side (written in PHP, Python, ASP, whatever language), or you can just pre-convert all files to a readable one.
The other approach, which is the best, is to use a Flash-based PDF viewer (such as http://flexpaper.devaldi.com/). This is easy, flexible and doesn't require writing server-side code. This approach is used by many Document-sharing sites (e.g. http://www.scribd.com/, http://www.slideshare.net/, http://www.docstoc.com/)

i use this
for the HTML
<img src="images/view.png" alt=" " border="0"/>
and the view.php file for viewing it through PDF.
<?php
$path = $_SERVER['DOCUMENT_ROOT']."/demo/documents/"; // change the path to fit your websites document structure
$fullPath = $path.$_GET['download_file'];
if ($fd = fopen ($fullPath, "r")) {
$fsize = filesize($fullPath);
$path_parts = pathinfo($fullPath);
$ext = strtolower($path_parts["extension"]);
switch ($ext) {
case "pdf":
header("Content-type: application/pdf"); // add here more headers for diff. extensions
header("Content-Disposition: inline; filename=\"".$path_parts["basename"]."\"");
break;
default;
header("Content-type: application/octet-stream");
header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
}
header("Content-length: $fsize");
header("Cache-control: private"); //use this to open files directly
while(!feof($fd)) {
$buffer = fread($fd, 2048);
echo $buffer;
}
}
fclose ($fd);
exit;
?>
Make sure the your browser has PDF add-on on it.

Mozilla created the PDF.js library. It displays pdf files in a web page without an external reader or plugin.

Your browser needs a PDF reader plug in to read PDFs in browser. A quick google search should provide you with one for whatever browser you are using.

If the file is not cached, it has to be downloaded. That is, if you grab it using HTTP. If it's on your local filesystem, you could use the file URI scheme.

right click
Open with
Choose default programme
Select
Adobe Reader
OK
If you want open chrome any other app
Same steps
Last Step
Select
Chrome

Related

LOCAL HTML file to generate a text file

I am trying to generate a TEXT/XML file from a LOCAL HTML file. I know there are a lot of answers to generating a file locally, usually suggesting using ActiveX object or HTML 5.
I'm guessing there is a way to make it work on all browsers (in the end HTML extension is opened by a browser even if it is a LOCAL file) and easily since this is a LOCAL file put in by user himself.
My HTML file will be on client's local machine not accessed via HTTP.
It is basically just a form written in HTML that upon "SAVE" command should be generating an XML file in the local disk (anywhere user decides) and saving form's content in.
Any good way?
One way that I can think of is, the html form elements can be set into class variables and then using the jaxb context you can create an XML file out of it.
Useful Link: http://www.vogella.com/tutorials/JAXB/article.html
What you can do is use base64 data-urls (no support for IE9-) to download the file:
First you need to create a temporary iframe element for your file to download in:
var ifrm = document.createElement('iframe');
ifrm.style.display = 'none';
document.body.appendChild(ifrm);
Then you need to define what you want the contents of the file to download to be, and convert it to a base64 data-url:
var html = '<!DOCTYPE html><html><head><title>Foo</title></head><body>Hello World</body></html>';
htmlurl = btoa(html);
and set it as source for the iframe
ifrm.src = 'data:text/x-html;base64,'+htmlurl;

Mp4 Download causes browser to play file instead of download

In my website I stream users mp4 content. I also allow users to download.
However in Chrome it seems to automatically play the file in an internal player instead of downloading the file.
How do I force the browser to download the file instead.
Regards and thanks
Craig
You have to use the HTTP header "Content-Disposition" and 'Content-Type: application/force-download' which will force browser to download the content instead of displaying it there.
Depending upon the server side language you are having the implementation differs. In case of
PHP:
header('Content-Disposition: attachment; filename="'.$nameOfFile.'"');
will do the job for you.
Ofcourse to simplify and generalize this for all your files, you may need to write a method which will route a link to downloadable content.
The link you can show in the html will be like:
Click here to Download Hello.mp4
And in the server side, you need a script which is being called on /downloadFile (depending on your routing), get the file by id and send it to user as an attachment.
<?php
$fileId = $_POST['id'];
// so for url http://yoursite.com/downloadFile?id=1234 will download file
// /pathToVideoFolder/1234.mp4
$filePath = "/pathToVideoFolder/".$fileId."mp4";
$fileName = $fileId."mp4"; //or a name from database like getFilenameForID($id)
//Assume that $filename and $filePath are correclty set.
header('Content-Description: File Transfer');
header('Content-Disposition: attachment; filename="'.$filename.'"');
header('Content-Type: application/force-download');
readfile($filePath);
Here 'Content-Type: application/force-download' will force the browser to show the download option no matter what's the default setting is for a mime-type.
No matter what your server side technology is, the headers to look out for are:
'Content-Description: File Transfer'
'Content-Type: application/force-download'
'Content-Disposition: attachment; filename="myfile.mp4"
Sounds like you are using a direct href to the mp4. If you are using any server side languages (i.e.asp.net, php, etc) language on your website you can force a download. In asp or .net you can use HttpHandlers with "content-disposition","attachment; filename=fname.ext"
or return File() ActionResult in MVC. Let me know if you can use any server side code and I can provide some code.
Alternatively you can try the html5 download attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fa#attr-download
i.e. <a href="http://www.w3schools.com/images/myw3schoolsimage.jpg" download="downloadfilename">
Or, try javascript/jQuery. Here is a plugin: http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/
Setting the Content-Disposition header should fix it.
Content-Disposition: attachment; filename=whatever.mp4;
Either in the server settings or in the preprocessing of the page.
if you want a cross browser solution
you need a server-side code to download the file
example:
I am working on jsp technology, if you can use jsp in your website you can try the following code in the file download.jsp:
<%# page import="java.io.*, java.lang.*, java.util.*" %>
<%
String filename=request.getParameter("filename");
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition",
"attachment;filename="+filename);
%>
<%
/*
File file = new File(filepath+filename );*/
String path = getServletContext().getRealPath("/mp4/"+filename);
File file = new File(path);
FileInputStream fileIn = new FileInputStream(file);
ServletOutputStream out1 = response.getOutputStream();
byte[] outputByte = new byte[4096];
//copy binary contect to output stream
while(fileIn.read(outputByte, 0, 4096) != -1)
{
out1.write(outputByte, 0, 4096);
}
fileIn.close();
out1.flush();
out1.close();
%>
you can put the code above in a file: download.jsp
then in your page links you will use it like:
song1
with my best wishes to you
You can get it done in a couple of ways. I'm not sure you use IIS or apache and which server side language you are using, but the techniques are similar for all.
You can add the MIME type application/octect-stream to the extension .mp4 in your IIS or apache, sothat all files with extension .mp4 will be shown with a download prompt. This is the most easy and sure fire way of showing the "download" prompt.
Plz see the example below.
http://www.codingstaff.com/learning-center/other/how-to-add-mime-types-to-your-server
In the above example, instead of setting video/mp4 fpr .mp4 extensions, change it to application/octect-stream
Also, the same can be done via server side code as well, (PHP code). The code will be similar with ASP.NET also,please google for "force file download"
$file_url = 'http://www.myremoteserver.com/file.mp4';
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary");
header("Content-disposition: attachment; filename=\"" . basename($file_url) . "\"");
readfile($file_url);
Why not simply use download attribute? Today is the simplest way.
<a href="/images/myw3schoolsimage.jpg" download>
See more here.

How to access image files outside project folder in html?

I put the user uploaded image files on separate disk partition on my local dev server(OS windows) which is outside of project folder. I need to access those image files in html pages of web app.
I tried out giving paths like: http://localhost:8080/C://tmp/thumbnails/pl_2001.JPEG but no help. Image is not fetched. How to properly access such files in html pages ?
You will have to use rewrites for this so you don't display sensitive folder names.
if you are using php you can use .htaccess rewrites for a slug something like images/someimage.mime and split/get what's after images/ and have a php function that takes the filename and makes sure it exists and if you want you can check if its a valid mime then send a header to say its a image/somemime so the browser can display the image instead of gibberish it will display without it.
$filename = "C://tmp/" . $file;
if(file_exists($filename)){
$img = getimagesize($filename);
if(in_array($img['mime'], array('jpg','jpeg','gif','png','etc'))){
header("Content-type: image/" . $img['mime']);
readfile($filename);
}else{
//default image
}
}else{
//default image
}
I haven't tested this but it should give you a idea on getting you started. If this isn't the language you are looking for try searching for something similar for your language you are using.

Embed DWG file in HTML

I want to ask how to embed DWG file in HTML Page.
I have tried using tag with Volo Viewer but this solution run only in IE not in Firefox and Chrome.
Dwgview-x can do that, but it will need to be installed as a plug-in on client computers so that anyone can view the dwg file that you embed online.
There may be third party ActiveX controls that you could use, but I think ultimately you will find that it's not practical for drawing files of even average complexity. I recommend to create DWF (if you need vector format) or PNG files on demand (using e.g. the free DWG TrueView from http://usa.autodesk.com/design-review/ ) and embed those instead.
I use DWG Browser. Its a stand alone program that is used for reporting and categorizing drawings with previews. It saves exports in html too.
They have a free demo download available.
http://www.graytechnical.com/software/dwg-browser/
You'll find what I think is the latest information on Autodesk's labs site here: http://labs.blogs.com/its_alive_in_the_lab/2014/01/share-your-autodesk-360-designs-on-company-web-sites.html
It looks like a DWG can be embeded there is an example on this page, but clearly DWF is the way to go.
You can embed DWG file's content in an HTML page by rendering the file's pages as HTML pages or images. If you find it an attractive solution then you can do it using GroupDocs.Viewer API that allows you to render the document pages as HTML pages, images, or a PDF document as a whole. You can then include the rendered HTML/image pages or whole PDF document in your HTML page.
Using C#
ViewerConfig config = new ViewerConfig();
config.StoragePath = "D:\\storage\\";
// Create HTML handler (or ViewerImageHandler for rendering document as image)
ViewerHtmlHandler htmlHandler = new ViewerHtmlHandler(config);
// Guid implies that unique document name
string guid = "sample.dwg";
// Get document pages in html form
List<PageHtml> pages = htmlHandler.GetPages(guid);
// Or Get document pages in image form using image handler
//List<PageImage> pages = imageHandler.GetPages(guid);
foreach (PageHtml page in pages)
{
// Get HTML content of each page using page.HtmlContent
}
Using Java
// Setup GroupDocs.Viewer config
ViewerConfig config = new ViewerConfig();
// Set storage path
config.setStoragePath("D:\\storage\\");
// Create HTML handler (or ViewerImageHandler for rendering document as image)
ViewerHtmlHandler htmlHandler = new ViewerHtmlHandler(config);
String guid = "Sample.dwg"
// Get document pages in HTML form
List<PageHtml> pages = htmlHandler.getPages(guid);
for (PageHtml page : pages) {
// Get HTML content of each page using page.getHtmlContent
}
Disclosure: I work as a Developer Evangelist at GroupDocs.

How can I create download link in HTML?

I have a basic idea of HTML. I want to create the download link in my sample website, but I don't have idea of how to create it. How do I make a link to download a file rather than visit it?
In modern browsers that support HTML5, the following is possible:
<a href="link/to/your/download/file" download>Download link</a>
You also can use this:
Download link
This will allow you to change the name of the file actually being downloaded.
This answer is outdated. We now have the download attribute. (see also this link to MDN)
If by "the download link" you mean a link to a file to download, use
Download
the target=_blank will make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.
Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.
You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)
In addition (or in replacement) to the HTML5's <a download attribute already mentioned,
the browser's download to disk behavior can also be triggered by the following http response header:
Content-Disposition: attachment; filename=ProposedFileName.txt;
This was the way to do before HTML5 (and still works with browsers supporting HTML5).
A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:
Link
Link to installer
To link to the file, do the same as any other page link:
link text
To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:
AddType application/octet-stream EXTENSION
This thread is probably ancient by now, but this works in html5 for my local file.
For pdfs:
<p>test pdf</p>
This should open the pdf in a new windows and allow you to download it (in firefox at least). For any other file, just make it the filename. For images and music, you'd want to store them in the same directory as your site though. So it'd be like
<p><a href="images/logo2.png" download>test pdf</a></p>
There's one more subtlety that can help here.
I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn't work all the time because the browser's compulsion to play the or display the file is still very strong.
BUT.. this is based on examining the extension on the URL's filename!You don't want to fiddle with the server's extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download's rename feature to fix the name.
<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>
I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn't.
You can use in two ways
<a href="yourfilename" download>Download</a>
it will download file with original name In Old Browsers this option was not available
2nd
Download
Here You have option to rename your file and download with a different name
The download attribute is new for the <a> tag in HTML5
<a href="http://www.odin.com/form.pdf" download>Download Form</a>
or
Download Form
I prefer the first one it is preferable in respect to any extension.
If you host your file in AWS, this may work for you. The code is very easy to understand. Because the browser doesn't support same-origin download links, 1 way to solve it is to convert the image URL to a base64 URL. Then, you can download it normally.
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = your_file_url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '')
var array = your_file_url.src.split("/")
var fileName = array[array.length - 1]
img.onload = function() {
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img,
0, 0, img.naturalWidth, img.naturalHeight,
0, 0, canvas.width, canvas.height)
var dataUrl = canvas.toDataURL("image/png", 1)
var a = document.createElement('a')
a.href = dataUrl
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
Like this
Link name
So a file name.jpg on a site example.com would look like this
Image
i know i am late but this is what i got after 1 hour of search
<?php
$file = 'file.pdf';
if (! file) {
die('file not found'); //Or do something
} else {
if(isset($_GET['file'])){
// Set headers
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Type: application/zip");
header("Content-Transfer-Encoding: binary");
// Read the file from disk
readfile($file); }
}
?>
and for downloadable link i did this
Download PDF