Display word/pdf file on web page - javascript

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

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/

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>

Related

Problem dowloading a pdf file through browser using javascript

I have to present for an exam a portfolio which allows visitors to download some documentations about my projects as pdf files.
I tried using an tag with a "download" attribute, unfortunately when I try to download the file by clicking on the link, the file is proposed to be recorded as .html or all files.
Whatever option I choose, after downloading the file, I'm not able to open it because it seems damaged or in the wrong format.
Here's the code I use :
My "demo" var is contained in an object Work as you can see on the screenshot :
In case it matters, my pdf file is stored here:
Thanks for you help ! =)
As a wild guess :
your path is wrong (documents/pdt-test.pdf)
your html is missing a doctype or a proper structure
you need a doctype/pdf somewhere. Something like in here Download a by ByteArray as pdf /handle error in React

How to convert html to base64 and save an image on a server with php?

I have a json file like this:
{"user":{"email":"user#test.com"},
"screenshot":{"blobFile":"<!DOCTYPE html><html lang=\"en\">...</html>"}}
and I want to take a screenshot, using XMLHttpRequest sending data a PHP file.
In PHP file getting request like:
$data = json_decode(file_get_contents("php://input"), true);
$htmlStr = json_encode($data["screenshot"]["blobFile"]); // <!DOCTYPE html><html lang=\"en\">...
so far everything is ok but how to convert this string to the image file and save a server?
I've tried html2canvas in PHP file but not fire.
any ideas?
I'd try to use PhantomJS. It's headless browser, which allows to interact with web pages many ways including making screenshots. It will require some time to understand how to work with it, but it definitely will get a result. Although, PhantomJS sometimes is a headache if your page is quite complicated structured, written using some frameworks like ReactJS, AngularJS, etc.
What it does it renders HTML page with styles including scripts serverside. If you save not HTML string but exact URL with COOKIE and SESSION data and then reconstruct conditions which user had in an opened page when you did a screenshot, it'll do a job.
See example here Screen Capture on PhantomJS

js, css, images are not loading in codeigniter

I have a project in CodeIgnitor. I downloaded it from hosting server and try to run it on localhost. but strange, home page is not loading. I checked images, css and js were in there respective folders but I cannot access from localhost. as I copied and paste image url or js url in browser to run, it took me to google map url.
I'm not able to catch the problem, whether it is .htaccess or some thing else is preventing me to load images on localhost.
I think it can be 1 of these 3 things:
Config
HTML markup
Directory permission
Answers:
(config/config.php) Set a valid value to $config['base_url'] key.
Try first use 'pure' HTML to load resources. If it loads, then you are using the path wrong - fix it dynamically later.
I dont know if you are using unix like system or windows. Anyway directory permission can cause this kind of problem sometimes. To fix is you need to apply a permission according to your system.
I hope it works. Please comment if you are sure that is not one of this 3 issues.
Try to use base_url in image/file path for EX::
<img src="<?php echo base_url(); ?>assets/pages/img/logo.png">
<script src="<?php echo base_url(); ?>assets/pages/js/example.js"> </script>
You nedd to load URL helper in config file to use base_url

How to upload PDF to google drive and embed them in a HTML static site?

I have a static HTML site. It's for a little food shop. They need to upload their menus and other every month. SO they need to upload PDF documents somehow. I think uploading to google drive is better. No ? It's easy than creating a seperate admin view to upload files and all.
so anyone can tell me how can I upload PDF in google drive and embed the link in my code ? There are eight menus and they need to show as thumbnails. When users click on them, they will download.
You need to share the pdf file to "Public on the web"
The go to file > embedded this pdf file. This will give you the html code.
Copy and paate it in your html code
Refer http://www.mybloggerlab.com/2013/03/how-to-embed-pdf-and-other-documents-in-blogger-posts.html
It is simple to upload a PDF in Google Drive and embed a direct download link into your code. I have inserted an excerpt from labnol.org
Google Drive doesn’t offer a simple option for creating these “direct download” link but you can easily create them by slightly modifying the generated URLs. Here’s the trick.
A file hosted on Google Drive has a shared link that looks like this
https://drive.google.com/file/d/FILE_ID/edit?usp=sharing
When you access this link, it will render the file in the browser but if you can rewrite this URL slightly, the link, when clicked, will download the corresponding file in the user’s browser instead of opening it in the browser. The modified URL would be:
https://drive.google.com/uc?export=download&id=FILE_ID
All you have to do is make note of the FILE_ID in the original URL and use it in the modified URL. For example, here’s an image file hosted on Google Drive that will open in the browser and here’s the modified URL that forces the browser to download the file.
Just do...this and enjoy
INSERT_YOUR_ID_HERE = your pdf file id
1st solution below
<iframe src="https://drive.google.com/file/d/**INSERT_YOUR_ID_HERE**/preview" height="100%" width="100%" frameBorder="2" scrolling="auto" ></iframe>
2nd solution
<embed
src="https://drive.google.com/file/d/**INSERT_YOUR_ID_HERE**/preview"
height="100%"
width="100%"
></embed>
enter image description here

Linking to a download in HTML

I have to create a online time-table for the school. The part what is troubling me at the moment is not to be able to download a file by clicking on the filename.
I try to download a file by clicking on a button or a link with html/php maybe javascript but for javascript I should somehow combine php and javascript because javascript has no readfile-function.
Some of my attempts:
Download
This just shows the content of the file in the web browser but I am not able to download it. The content of my testmove.txt is testmove123, so I just see the text testmove123 in my browser.
Another example:
Javascript:
function download(file)
{
window.location=file;
}
+html:
<input type="button" value="Download" onClick="download('dateiupload/testmove.txt')" >
Makes the same.
Another example:
Javascript:
function download(path)
{
var ifrm = document.getElementById("frame");
ifrm.src = path;
}
+html:
<iframe id="frame" style="display:none"></iframe>
download
By clicking on "Download" the javascript function starts but nothing else happens and I see the same site.
Another example (with php):
Javascript:
function download(path)
{
var ifrm = document.getElementById(frame);
ifrm.src = "download.php?path="+path;
}
+html (same as above):
<iframe id="frame" style="display:none"></iframe>
download
+php (the reason my its more or less working):
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=".$_GET['path']);
readfile($_GET['path']);
This solution doesn't wait for a click from me and starts the download by starting the site.
A working solution I thought about would be to link to another site where the download automatically starts but its absolutely not how it have to be. I use $_POST variables on the site and I lose them when I leave the site and I can't come back after the download.
It must start the download by clicking on the filename.
You can download straight from the anchor tag by using the 'download' attribute.
<a href="dateiupload/testmove.txt" download>Download</a>
The filename of the downloaded file will be testmove.txt by default.
You can change the filename like this.
Download
More Details at w3Schools
You were correct to use those headers - as you can see, the file is being downloaded. The only problem now is to have it download when you want it to.
For a very simple solution, I would suggest setting up a download.php file that will be the page you download all files from. You would setup a GET parameter for this file and the URL would look something like this:
http://your-cool-site.com/download.php?filename=textmove.txt
Now inside download.php, you'll read that GET parameter which will be a filename, and then pass it eventually to the readfile function. This is the stage that you should think about enforcing some level of security as passing a path directly to the function could give people access to files that they shouldn't be looking at! Think about limiting the actual downloadable files to a limited selection of files or paths you know to be "safe" for people to download.
You'll also need to use the file name in the headers (and possibly even the size of the file to support displaying progress of the download).
Once you have this download.php file ready, you can place links to it from other pages in a very similar way that you have now:
Download File
Clicking on this link will make the request to download.php and when it gets the appropriate headers, the download will start.

Categories