Editing the PDF to add/modify contents - javascript

Currently in my application users can view or download the PDF files. Displaying the PDF call is an API call to a third party site. Below is the way i am getting the PDF and displaying it using window.open:
window.open(URL,"null","width=0, height=0");
What I need is to add or modify the contents in PDF. How can I achieve this?.
I guess I have failed to explain my problem. Let me explain this in detail. As mentioned earlier the PDF which the user will be seeing is from the the third party site. We fetch the PDF and display in new window to user using window.open. Now I need to add some detail into the PDF and also edit the contents like changing the font size etc. What should be the approach? Do I need to save the PDF on the server and then modify the contents and display it to user? Or can I edit directly without saving it? I am not sure how to approach this. Kindly help.
I have tried out many questions on this forum but unfortunately I did not get the answer.

Related

How to edit pdf stored in a server by a webapp client?

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...

Is there a way to embed pictures from DROPBOX or just get the picture file itself and upload it to my website?

I'm building a website and need to store images in it. my database gives only 512mb and I'm planning to use more images than that. I taught of the idea to store the images into dropbox and using its API to get the images and embed them into my website.
Is this possible and if it is, how can I go by doing this?
I won't show some code because I don't even know if this is possible.
Also if you have an idea of storing the images into another database or another way feel free to answer. Basically I need a way to upload images at runtime (from my website or while my website is running but without changing the code) and after that I need to display the images to the website.
You might try forwarding image to imgur or something similar and you'll probably get url back as return

display the pdf in the same window

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.

I want to display PDF inside div, object or iframe BUT restrict user from downloading it

I have multiple pdfs. I want to display them on my page but I don't want the user to download them. I tried using google docs but the user can open the PDFs externally and was able to download them. Any ideas?
If the browser can display the PDF file, the user can download it... or grab it from the cache... or find the direct URL from the HTML source... etc.
If your concern is the PDF getting out of your control and unauthorized users getting access to it, you're better off using a PDF DRM solution. There are various solutions at different price points.

Pure JavaScript or jQuery file download function

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');

Categories