Menu
I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?
P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.
874
Just append your src attribute with an appropriate URL to a specific doc viewer, it will download your file from URL and then generate an HTML page from it, and then you direct your iframe to it and voila!
First, open the html file you are editing from the File : Open dialog, or from the Open File icon on the toolbar. Click on the toggle Browser Preview on the toolbar or from the View menu. This will give you a quick browser preview. Click on the button again and it will return to the code view.
JS library is initialized taking the object url as the source url of the PDF. PDF. JS' APIs getDocument and getPage are used to render the PDF. The first page of the PDF is rendered as an image, and that is shown as the preview of the PDF.
There is the Javascript ViewerJs. An open source tool which allows a website to display PDF and open standard for office documents. It will display the documents inline and without browser plugins.
I have tried to create little example and that would display PDF Preview before uploading PDF file.
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript PDF Viewer Demo</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> function PreviewImage() { pdffile=document.getElementById("uploadPDF").files[0]; pdffile_url=URL.createObjectURL(pdffile); $('#viewer').attr('src',pdffile_url); } </script> </head> <body> <input id="uploadPDF" type="file" name="myPDF"/> <input type="button" value="Preview" onclick="PreviewImage();" /> <div style="clear:both"> <iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe> </div> </body> </html> Not sure if anyone still checks this thread, but i thought i'd share what i did. Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):
$('#input').change(function (event) { var file = URL.createObjectURL(event.target.files[0]); $('element').append('<a href="' + file + '" target="_blank">' + event.target.files[0].name + '</a>'); }); This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works. Here's an example: https://jsfiddle.net/j9gw023b/3/
40
No. This is not possible.
You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.
If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.
41
The File API will allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. Mozilla have released a JavaScript PDF viewer, but I'm not aware of anything for MS Office files.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
