在网页上显示 word/pdf 文件

Question

I have few files in doc/docx/pdf format stored on server's folder and their path are saved in database. I wish to fetch the path of these files from database and then display it on my website.

In the database the files are stored in this format

id    path
1    abc/request/file1.docx
2    abc/request/file2.pdf
3    abc/request/file3.docx

To display the file i used the following method

$a = $data->path;
$b = 'http://example.com/';
$r = $b.$a;  

<iframe src="http://docs.google.com/gview?url=<?php echo $r; ?>&embedded=true" style="width: 100%; height: 600px;" frameborder="0"></iframe>

Issue

Earlier the file was getting displayed but all of a sudden it is not getting displayed now

I did the following checks to see the validity of file

1) File is in proper format and is not corrupted and does exist on server folder 2) The console is not giving any errors 3) Tried to run http://docs.google.com/gview?url=http://example.com/abc/request/file1.docx on browser, there also the file is not getting displayed, however the other example url given on net are working

Can anyone please tell how to correct the error. And I would also appreciate if anyone could tell any other way(using jquery, javascript or any but reliable way) to display the files on website without disturbing the formatting of the original file

Answer 1

For PDF, you can use ViewerJS to render.

For doc/docx, consider using Microsoft Office Viewer as a walkaround if Google Docs Viewer is not stable enough to you

 <iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fieee802%2Eorg%3A80%2Fsecmail%2FdocIZSEwEqHFr%2Edoc' width='100%' height='900px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

P/S: Don't know why the code snippet is not working, but you can take a look here: https://jsfiddle.net/gcuzq343/

Answer 2

you can use
1. google docs viewer

<iframe src="http://docs.google.com/gview?url=http://example.com/my-document.doc&embedded=true"></iframe>

2. Microsoft viewer

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/my-document.doc.doc' width='800px' height='600px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>