View word and pdf documents in browser - javascript

Is there a easy way to view a word or pdf document in my webpage? I searched In google, but didn't find what i need...
I want it to load word or pdf document from link, and show the content of that document In the webpage.

If the documents are not confidential, and you don't mind uploading it to a publicly avaliable website, you could embed the reader from scribd .
They also have an API, which might allow you to restrict who can view your documents.

If you want to open pdf file from link in HTML than this code may help you:
<a href=\"NAME OF FILE.pdf\" title=>NAME OF LINK AS YOU WANT IT TO APPEAR>Click Here</a>
this link open your pdf file in the current web page.
For further information on this topic
-> Click here

Related

How to download a canvas rendered pdf file opening in pdf.js?

I have zero knowledge with regard to coding. I desperately need to download a pdf file which is being shown in the fashion attached to this post. The download button is not working and I've tried everything which I can to download the file. Any help is welcome. Things which I've tried are
Finding file source in network tab under inspect element
Finding any URl leading to the pdf again in the inspect elements tab.
Saving the page as Html, upon which it downloads but never opens again with the pdf required.
Also in my limited research which I could make sense of was, the page used canvas element to render the pdf. Text of pdf is seen to be entered manually in a separate layer.
The address of the pdf being rendered is actually visible in the url on your image.
the ../../ means go up 2 directories.
So that means the absolute url for your pdf is this.
https://www.time4education.com/MoodlePages/catmttt/cat20materialvideos/VAHO1002103.pdf

Using JS to print page as PDF in Chrome and open it

I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu command. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).
Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.
There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.
A way you can do this is to make it an iframe object and print it like this:
document.getElementById('content-frame').contentWindow.window.print();
That would make it send a print menu for the iFrame, printing only the content within the iFrame.
The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name.
For Example...
HTML:
<div class="parent-container">
<h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf"
data-pdf="source">Open</button>
</div>
Javascript:
function displayEmbeddedPdf (event){
event.preventDefault();
let pdfSource = $(this).data("pdf");
let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf"
src="https://via.placeholder.com/150#view=FitH">`
$(this).parent().append(pdfDisplay);
}
$( document ).ready(function() {
$(".open-pdf").click(displayEmbeddedPdf)
});
I've used an image placeholder in the space below, but you could instead
insert the pdfSource variable to access a source in your directory ... Also
note that the "embed-responsive-item" class on the embed tag is from with
Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf
See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ
Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html

How to open PDF file from javascript, but not in new window?

I need open PDF file from my JS code, but link in not good aproach.
I want to open this PDF in something like pdf viewer in current page.
Unfortunately, the behaviour is all down to the PDF reader software that the user has installed, so you can't control it with a simple link.
That is, the PDF reader software installed on the user's PC overrides the browser's 'download' behaviour, and does what it likes with the PDF - whether that is launching it in a separate window, or a client application.
To render it in the same window you need to instruct a PDF viewer that you control.
There are a few if you google, and the one I prefer is the open source pdf.js
Alternatively, you may be able to find an online 3rd-party viewer that you can call via a URL, passing it the link to your PDF as part of the URL.
Don't link directly to the PDF. Create a new HTML page that has a single "object" tag that takes up the entire window; basically an HTML wrapper. Set the data property of the object to the PDF you originally wanted to link to. Set the link in your source HTML to point to the HTML wrapper. That way you can control how the wrapper loads and the PDF just shows up in the page. The HTML would look something like this...
<body style="overflow:hidden;height:100vh;margin: 0;padding: 0;border: 0;">
<object data="YOUR_PDF.pdf" type="application/pdf" style="width: 100%; height: 100vh"></object>
</body>
The link in your document would be a normal link to the above HTML page. It just looks like it links directly to a PDF.

Unable to access the whole content of the downloaded html file

My original task is to download multiple scientific publications as html file. Currently my script downloads a file in chrome but it takes to the url in firefox. But that is not my questions.
If you will see the downloaded html source, you will find that not all content has got downloaded. Only some of the content shows up in the downloaded html file. That is my problem. Why I am not able to get the whole html document content in the downloaded html file. The file I want to download is this
var links = [
'http://www.sciencedirect.com/science/article/pii/S2078152015000516'
];
I thought probably it is because of CORS issue. But, after implementing CORS script, it was still showing the partially downloaded content in the responseText.
Any assistance will be appreciated.
Also, if someone can tell me why in firefox, the script does not downloads the file and takes me to the url instead.
The reason why you are unable to download the entire page, is because the page only loads half way, and the rest is added dynamically once you scroll down.
Therefore, when you try to download the page, you only receive the initially loaded half without the dynamic part.
since it is done using javascript, this particular website offers you an alternative in case you have javascript disabled and do not want to/cant enable it (like with a reader):
If you view the source of the page, you can locate the following message box at the very beginning of the body:
<div class="ua_btn" role="region" aria-label="screen reader compatability">
<a role="button" rel="nofollow" href="http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y">
Screen reader users, click here to load entire article
</a>
This page uses JavaScript to progressively load the article content as a user scrolls.
Screen reader users, click the load entire article button to bypass dynamically loaded article content.
</div>
here you are offered a link with a query part "np=y" which overrides the dynamic loading and initializes the whole page right away:
http://www.sciencedirect.com/science/article/pii/S2078152015000516?np=y
use this link in order to download the artice and it will work.
Firefox:
As mentioned in the comments, firefox does not support CORS downloads by design due to potential security risks. more about it can be found Here

Generating image preview of a doc or pdf file

Hey guys I have searched a lot but didnt get any working solution for this problem.
I am working on a site using jsp and on this we have to upload forms in doc / docx/ pdf format. I want to generate the preview of the first page of the form. So that user can checkout whats in the form before downloading it.
Hope someone will come up with some solution for this.
Thanks
Not sure what OS platform you are on for your jsp, but my recommendation would be to have a virtual printer driver that can "print" the document at hand to an image file (or as HTML). Then you can manipulate the output of the printer driver anyway you want. Extends itself nicely to other file formats as well.
Another version of this technique would be to programatically open the document with Microsoft Word (using ole automation), then do a screen capture after the document opens. Word can load PDF files as well. You'll have to find a creative way to get the document into a Windows desktop process from your server. But it could work.
Well.. what you can do is..
Hyperlink the form names with relative paths of your jsp with download option. You need to write a servlet to download the form.. preview this jsp in pop up window.
or
use iframes in html create a div tag to preview and download the same form you are displaying. You need to write a servlet to download the form.
Make sure you set the appropriate contentType of your forms doc/pdf/jsp using response.contentType("image/jpg");
response.contentType("application/pdf");
response.contentType("application/doc");

Categories

Resources