Using Javascript, I'm trying to establish an appropriate method to display a PDF file in a new browser tab. If the browser doesn't have an in-built PDF viewer, I'd like the user to have the option to download the file. My research has led me to John Culviner's jQuery plugin jquery.fileDownload.js here, and that looks a great fit. The issue I have however is that I don't have access to the web server hosting the site in order to upload the plugin. I've also been unable to find a CDN that hosts the plugin and which I could link to.
Does anyone have a few 'best practice' suggestions to achieve my goals that I can research further? Thank you.
There is no need to involve JS. Just link to the PDF. Use the target attribute to trigger a new tab.
<a href="foo.pdf" target="_blank">
If the server lies about the content-type of the PDF or sends a header that indicates it should be downloaded instead of rendered, then you are out of luck.
If you really want to use JS, then:
window.open('foo.pdf');
Related
The use case of this problem is very simple but i struggle to find a good solution for it.
I want to allow my users (through a webapp) fill some pdf files stored in server (pdf with forms, which begin more and more popular).
Actually, app like chrome or acrobat reader are able to fill them perfectly whe its open locally.
I already allow this functionnality for docx and xlsx files, for that i use Webdav and the custom protocols ms-word ad ms-excel. It works perfectly.
For pdf, I didnt found equivalent. Its look the mains pdf reader/editor doesn't implement this protocol. Whe we open distant file with these tools, they failed for write permission when save or they try to save the file locally) .
Another option i take a look was the new file system access api (https://web.dev/file-system-access/). But again i wasn't able to make it working properly. The main problem here is how we can edit the file.? Im able with this api to dowload the file locally and keep the filehandler to retrieve the updates, but i blocked on how i can edit the file ? like an option on the fileHandler to say "Open this file with default editor on the OS". this would be perfect. But for now to edit the file i have to manually open it on the eplorer. i can't ask my end user to do that there is too many risk they edit the wrong file.
Another option on the table is the different javascript library for editing PDF, but these last one looks all very expensive, usually very heavy on the client side, with advanced features definitively i don't need. I just want to fill the forms and retrieve the pdf completed. So i would like to avoid this option.
Last option i take a look, i already use pdf.js (from mozilla) and pdf-lib.js in my app for some drawing features. I was thinking
rendering the pdf with pdf.js
retrieve all the forms fields (id, type, size, position) of the pdf with pdf-lib
generate html input write on the top of the pdf with the informations given by pdf-lib
i let the users fill the input and click on a save button whe he finished
on the save, i edit my pdf with pdf lib, i set the value of all my forms fields by taking value of the corresponding html input, and i retrieved the pdf updated.
This solution look for me the more "feasible". But im afraid of the volume of development, on how it will render, deal with zoom, rotation, etc. i would like to not have my custom solution.
I precise my webapp target chrome so it make me crazy to not be able to use the chrome pdf viewer/editor to do what i want.
PS : i struggle to post this question on stackoverflow. the previous one was deleted witout i had precise reasons. i try to be more specific on this one, but please if its such a dumb question, please answer it
I feel your pain, this is currently not possible. Adobe acrobat can open PDFs from webdav locations (simply call acrobat.exe and pass in the WebDAV UNC and it will work) but there is no way to trigger this from the browser.
If you are able to deploy software to your customers machines, you could create a custom URL scheme to do this...
there is a requirement where i have to show the pdf in the same window (may be inside the embed/object/iframe).
i am getting the pdf from the service in array buffer format, when i get it i am converting it to blob and generating a temporary src for this using
URL.createObjectURL(file)
I know that createObjectURL is not going to work in IE as it is not allowed there.
now the only option i have left with is to use any third party library like pdf.js to make this thing work.i have tried the same and i had some success in it.But as it comes with the big worker.js library i am trying not to use it for just one thing.
can someone please suggest me if is there any other way of achieving this task?
i have following things or questions in my mind.
host this pdf online and just return the pdf link to the front end(i am not a bakend developer so i dont know if it is possible to host pdf dynamically somewhere in the same domain or at any third party host)
get something equivalent to 'URL.createObjectURL' for explorer and then use object/embed/iframe to show it
render the pdf in a page at server side and just return the whole document to front-end.
try a heavy library like pdf.js and make it work(last option for me)
any other solution which i am not aware of.
thanks in advance for your help.
In a website that uses CKEDITOR to post articles, how do I, as a content creator, upload an image hosted at a third party (e.g: "http://www.tizag.com/pics/htmlT/sunset.gif") by using CKEDITOR's inbuilt upload function?
Back story:
I work at this tutoring website, my job is to read a student's question, and quickly find appropriate answer and post it. Many times I take references from wikipedia, copy-pasting works, but anyone can right click the equation-image, and "open in new tab" to see that it was hosted on wikipedia. Instead of manually downloading and uploading each equation, there must be a way to programatically and (if possible) asynchronously upload them all. I am unable to understand their code, I can't figure out the curl to upload the image. I am hoping for a general javascript code that uses CKEDITOR's functions from my browser's console to upload an image hosted at a third party website. CKEDITOR.version: 4.3.3
Note: I am not the programmer of my work website, so I cannot install add-ons in CKEDITOR's installation folder on the backend. I need a way that uses my browser's console.
There are plugins that will do that for you in CKeditor.
Visit CKEDITOR BUILDER to add any of the plugins below.
First plugin is the Image plugin. See the screenshot.
You can upload an image via URL with this.
The other plugin is the Media Embed plugin
This one as well will do what you want.
I have a link to a PDF on my web page and I want to know if it's possible to always ask the user if they want to download the PDF or open it in a new window. Is this possible? I realise that people would not want the PDF to automatically download, but 2 links or an option would be great.
There is quite a lot of documentation about this on the internet, some even saying I'd have to have PHP and this is not possible on the server I use.
I need a javascript, jQuery solution or alternative suggestion. Not asking for much I know.
Thanks very much for reading this and I hope it makes sense.
All the best!
T.
It can be done, but not in clientside javascript. If you have a server side script that feeds the file, it can send a Content-Disposition: attachment header along with the response. This will trigger a save as dialog in the browser.
If they are static files, you can also change the configuration of your server. For Apache use the FilesMatch directive. There's a nice example for PDF files here:
http://www.thingy-ma-jig.co.uk/comment/7045
I'm developing a web app that needs some sort of filesystem access. Ideally I'd want to be able to "Open..." a file into the app and then "Save" the file back to local filesystem at the location that the user opened it from.
Currently, we use a java applet to achieve this functionality, but since java is going out of style, we're needing to do this with javascript and html5.
Obviously, this can't be done because of security reasons built into browsers, so I'm trying to somewhat emulate it.
I'm using the html5 file api to successfully import/open the files, so that's half the battle. The hard part is getting the saving feature. I'm getting close using an iframe and content-disposition, but problems arise when browsers are set to automatically download the files to a downloads folder... users may get confused and be unable to locate the file they just downloaded.
So, my question is this: is there some sort of onSave event or some kind of way for the browser's "Save As..." window to return at least the filename that the user saved the file under?
Also, I've looked into the filesystem/fileWriter html5 apis, but from my understanding they're limited to only a sandboxed area of the local filesystem and only available in chrome dev releases.
Any help would be appreciated!
No, there is no way to do that with pure JavaScript. You can manage to trigger a download with data URIs or an iframe with some headers but you can't circumvent the browsers' download managers.
You can either use a Flash or Java applet to handle the saving for you, or ask the user to right click on the link and do save as, then he might be able to choose the destination.
One popular option using Flash is Downloadify.