Monthly Archive: August 2017

Document Viewer 2

Embed Google Doc Viewer in your website

  Many a time you feel a need to show user-uploaded content on your website, but un-luckily browsers only support few document types, viz pdf & images. What if your user uploads documents ( doc, docx, xls, xlsx, ppt, pptx , psd, ai  and many more ). It will very good user experience if your website shows user content right on the user’s page without moving them away to any third party. Google Doc Viewer to rescue Google offer a free tool, that let you embed a pretty looking doc viewer that can serve all the file types mentioned above. You just need to add a single iframe and you are done. <iframe src=”http://meshcookie.com/wp-content/uploads/2017/08/file.docx&embedded=true” style=”width:1024px; height:700px;” frameborder=”0″></iframe> Note:  https://yourwebsite.com/file.docx, is the file being viewed. Just place this iframe on your website and the docx file will be viewable right on the page.   Few take aways CORS if you add iframe to your website and the URL of the iframe is a domain which is not part parent domain, then the browser will generate an error and you won’t be able to view file. In order to sort this issue make sure you add the param  <pre>embedded=true</pre>, so if you are embedding the viewer in your website then make sure you add this param. <iframe src=”https://docs.google.com/gview?url=https://yourwebsite.com/file.docx&embedded=true” style=”width:1024px; height:700px;” frameborder=”0″></iframe> URL Encoding   if the file that you want to show requires some added param for some version or maybe passing auth params, it is required to use URL encoding. var url = “https://yourwebsite.com/file.docx”; var accessibleUrl = encodeURIComponent(url);   People Using it There are a lot of people using it for there benefit, few include: Trello Eazespot