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.
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...
I'm working on a solution that shows different graphs on a webpage using d3js to draw them. We're now trying to generate a PDF file from the report but can't find a solution that works using our graphs. Is there anyone that has experience with a similar problem and knows a library we can use?
We've been trying these and some others but all have failed to work properly so far:
PhantomJs (Doesn't seem to work in Azure)
JsPdf (Stylesheets are not shown properly)
Rotativa (Best so far but still didn't always work properly)
Thanks,
Mark
As this was a application installed on a server, we ended up creating a service that's using CEFsharp to capture the page as a PDF.
Using MSMQ we send a PDF capture request to the service, the service captures the PDF and returns the result through MSMQ. The user will get a notification in the web application that the PDF is ready to be downloaded.
Might not be the solution we hoped for, but an advantage is that users can also schedule PDF's as the service is always running.
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.
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');
Can anyone who worked on something like this describe the general process? I'm very confused right now. By report I mean a visually appealing document with logo, tables, headers and footers, and the data will be retrieved dynamically.
The approaches I looked at are:
Use a server side library (node.js module) that generates the PDF. Send the string representation as response with Content-Type: application/pdf.
Problem: I chose PDFKit, but it doesn't work and no content shows up at all. It uses PDF 1.3, which is old.
Generate PDF on client side.
Problem: Most popular library seems to be jsPDF, but it's not very capable of producing sophisticated-looking documents.
Write template in PDF source code and fill in the data on server side.
Problem: The encoding is weird, for example if I just do doc.text("1"), a lot of unrecognizable characters appear for just the string "1". I'm very confused about this.
Finally, it'll be super helpful if anyone provides a link that can help me understand the encoding! It's super confusing to me.
Any experience with similar tasks is much appreciated!
I haven't personally done this, but the first thing I would try would be:
On the server side dynamically build the appropriate HTML document and CSS
Use phantomJS to render that document
Tell phantomJS to convert that document to PDF, saved in a temp file
Send the PDF back as the HTTP response by writing the temp PDF file to the response body
Delete the temp file
If you are struggling with content-type, content-disposition, etc, you shouldn't have to worry about that if you have a valid pdf file on disk and just write that data to the HTTP response. With the right headers, you should be able to ask the browser to either display the PDF or treat it as a file to be saved as a download.
As the member of jsreport team, I would give it a shot.
jsreport platform provides multiple ways how to generate pdf reports. The most common included one is to transform html into pdf using headless chrome. jsreport will also compile and render handlebars or jsrender html templates if its specified, it can embed images, add header/footer, run custom javascripts and more.
You can play with the examples and see the options you have
https://playground.jsreport.net
When you are done with playing, you can use jsreport online or download and install jsreport server to your company. Then you are ready to call its REST API and generate reports.
More to your question
jsreport will provide correct content-type in the response for pdf or html. You can just let the browser to display the result
data can be sent to jsreport api or retreived by custom script
I'm not sure what the most common approach is, but personally I like to create an HTML template, populate it in my server-side code, and then use wkhtmltopdf to convert the HTML into a PDF. If you're using .NET you should check out WkHtmlToXSharp (which is a .NET wrapper for wkhtmltopdf.)