We Keep Coding

Encoded raw docx base64 string preview on react

How do I preview a raw base64 string without decoding and get a preview on my website? (there are tools for images, pdf but I don't have anything for office).

Put it in an iframe and for src, pass in document url either from Google docs or Office 360
<iframe src=INSERT_DOCUMENT_URL frameborder="0">
</iframe>

Opening a local pdf file in iframe with javascript

I am using the below code to open a pdf file but its not working-
<iframe src="file:///C:\Users\Downloads\0895custbill08132015.pdf" style="height: 638px;" frameborder="0"></iframe>
For a google doc the below code is working fine, I am not sure what is required to open a locally saved doc.
<iframe src="http://docs.google.com/gview?url=http://webshire-aioopsss.com/pdfs/sample_contract.pdf&embedded=true" style="height:638px;" frameborder="0"></iframe>

Most browsers won't let you open a locally stored file from a website for security reasons. Typically I will host the file on an IIS server and then retrieve it from there (which is what you're doing when you're retrieving it from googledoc).

You are using backslashes in your src. Please change them to slashes
<iframe src="file:///C:/Users/Downloads/0895custbill08132015.pdf" style="height: 638px;" frameborder="0"></iframe>

You can use
var pdf = $('\<\object type="application/pdf">');
pdf.attr('data', "you pdf scr");
append it in your iframe..

How to change the browsers' pdf viewer through program (e.g. HTML, JS, PHP )?

Goal : A browser base pdf viewer that has zoom and drag/ pan function (better if allow hiding the save function) to replace the browser default one
Problem : all browser (exclude old IE) has their own build in pdf viewer, that without dragging/pan function
Currently this code use default pdf viewer:
<object id = 'zoomPage' type='application/pdf' data= '1.pdf'>
<p>The PDF can not display
</p>
</object>
Is it possible to force all browser (Chrome , FireFox , IE8+) using the adobe reader to open pdf file using javascript / jquery / html /php? Or are there any web base pdf viewer has the functions mentioned above?
Note:
For the first approach :
I found the way e.g.
content-disposition : attachment
but it only change the behavior from viewing to download the pdf , not changing the preference in opening the pdf file

For approach 2: (Which I recommend)
Check out:
https://github.com/mozilla/pdf.js/
PDF.js is Portable Document Format (PDF) viewer that is built with
HTML5.
PDF.js is community-driven and supported by Mozilla Labs. Our goal is
to create a general-purpose, web standards-based platform for parsing
and rendering PDFs.
EDIT: For your speed needs, check the discussion on the other options here: Recommended way to embed PDF in HTML? and see if the other options fit your requirements.
Approach 1 is inherently dicey due to security reasons

The only way you can force it client-side is by supplying the alternative...such as pdf.js, zoho, google pdf viewer, scribd, etc (there are many). I'm not sure if Adobe provides an in-browser pdf viewer like you're expecting.
The default pdf viewer is kept in a variable found in about:config that can only be changed by the user.

Is it possible to force all browser (Chrome , FireFox , IE8+) using
the adobe reader to open pdf file using javascript / jquery / html
/php?
You could try this by using an iframe pointing to the pdf file. The browser will automatically open the pdf file using a pdf reader software on client machine. Like this:
<iframe src="yourpdffile" style="width:100%;height:500px"></iframe>

you can't force something on the client for a security issue, but you can check with something like this. My previous sentence follows by the experience that I have on browsers and coding but maybe I can say something wrong.
You can control if there's Adobe Reader using javascript and a code that check if there is the Reader installed with a script like this (I've used these lines months ago and they work)
Try to use this plugin that maybe is for you pourpose (the first sentence link).

You can also use google docs viewer to achieve this functionality.
Just refer this link : https://docs.google.com/viewer
You can get the iframe url and put it in your site.
<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.yoursite.com%2Fpdf%2Ftest.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>
please note that the value of the url parameter in the src is url encoded.
Check out the JS Fiddle example here

Display .doc inside a div

It is possible to display a pdf inside a div using this:
<div>
<object data="test.pdf" type="application/pdf" width="300" height="200">
PDF : test.pdf
</object>
</div>
Is it possible to do something similar for a .doc or .docx? (without server side)
I am assuming the browser or the computer has a way of reading the data.

Might I suggest Google Doc Viewer, it'll allow you up show several types of files inline where they would normally prompted for download:
https://docs.google.com/viewer/
You can also use this inline in your own website with the use of an iframe.
Here is a list of supported file-types:
Microsoft Word (.DOC and .DOCX)
Microsoft Excel (.XLS and .XLSX)
Microsoft PowerPoint (.PPT and .PPTX)
Adobe Portable Document Format (.PDF)
Apple Pages (.PAGES)
Adobe Illustrator (.AI)
Adobe Photoshop (.PSD)
Tagged Image File Format (.TIFF)
Autodesk AutoCad (.DXF)
Scalable Vector Graphics (.SVG)
PostScript (.EPS, .PS)
TrueType (.TTF)
XML Paper Specification (.XPS)
Archive file types (.ZIP and .RAR)
I messed around with this for mobile output of PDFs but the mobile version had an error that made it impossible to use. Not sure where the development on this product has landed but the desktop version always worked very well.

You can do this through an iframe inside the div by linking the source to the path of the file on your server.
<div>
<iframe src="mydoc.docx">myDocument</iframe>
</div>
<div>
<iframe src="mydoc.xslx">myDocument</iframe>
</div>
<div>
<iframe src="mydoc.pdf">myDocument</iframe>
</div>

Data URI for CSV file in firefox not putting .csv extension

I have a "Download file" href defined in my javascript file as:
$("#downloadTag").html("Download");
In chrome it works as expected i.e. when I click on this download link it gives file name as "download.csv". However, in firefox, it puts some gibberish name like "puzdb.part".
Could someone please point me what I am doing wrong?
Thanks
Edit:
Here is the jsfiddle demo: http://jsfiddle.net/kLJz9/
Edit #2:
I noticed that on windows it does not put .csv extension for chrome as well and behavior for firefox is still same (i.e. .part extension)

For Chrome you can designate the file name/extension by adding a download attribute to your anchor tag.
Download
This attribute only works in chrome v 14+ and no other browser.
I am also looking for a solution to this problem, but I hope this helps.
EDIT:
the download attribute should fix the issue you are having on windows machines and chrome.