Generating a PDF from a HTML page that holds d3js graphs - javascript

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.

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

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.

Questions about turning the HTML code that uses Cytoscape.js into a web link accessible by other people

I am able to use the Cytoscape.js library to display a network graph on my own web browser. I wrote a HTML file containing the JavaScript code that takes in the graph JSON and style JSON files from my laptop and calls cytoscape(). When I run my HTML code on my laptop, the network graph is displayed on my own web browser and I can play with the graph.
Now I need to run the HTML code on our Linux server and then send a web link to the user, so that the user can click on that web link to view the displayed network graph on their own web browser, and the user should also be able to move nodes & edges around just as I did on my own web browser.
I am not a web developer so I am missing some very basic knowledge. I think I probably need to link the HTML code to a web domain (deploying the HTML code on a hosting server with domain name). I was just wondering if you could offer me some advice on how to do this?
Another question (which is more important) is: Assume I am able to link the HTML code to a web domain. When the user clicks on the web link to view the displayed network graph on their own web browser, is the user still able to move nodes & edges around?
The graph JSON and style JSON files and some additional JavaScript code the HTML loads in reside on our server. I am not sure if there are any issues about this when the user accesses the web link?
Any advice would be greatly appreciated.
Thank you very much in advance!
The question is too broad. You'd be best off searching for some books to read regarding web dev.
You might find using Github pages a bit easier than managing your own server, but you really should do some reading either way.
Basic resources to get started
https://developer.mozilla.org/en-US/docs/Web/Guide/Introduction_to_Web_development
https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction

Display PDF from chatter files in Visualforce Page

I am storing pdfs as chatter files in our SF org which is working well except for the fact that displaying these PDF's to the users is very challenging, especially on mobile device (eg ipad)
I have tracked down some good javascript PDF viewers which will behave fairly on well on ipad.
The challenge is delivering the pdf file from to these viewers.
Most of them require a local pdf file to view but there are some like google view which will take a url to the pdf for eg
https://docs.google.com/viewer?url=https://urltopdf
The pdf is available via a chatter GET as follows:
https://cs2.salesforce.com/services/data/v35.0/chatter/files/{docId}/content?versionNumber=1
The problem ofcourse is that I need to pass in an authentication header. If I just pass that url to google viewer it fails because of Authentication as its not passing in the Auth header.
I tried a few things..
Built a proxy API in Salesforce which Google viewer calls, that API calls chatter and then returns the file to google docs view
PROBLEM: Custom SF APIs have a 6mb limit which means that if the pdf is bigger than 6mb it wont work!
Built a proxy API external to SF (to get around the 6mb limit) including some interesting ways to persist the authentication
PROBLEM: There are too many hops and the google viewer is not getting back the data in time...its calling the external proxy API which is then calling the chatter API which then has to return the pdf data back to the external proxy API and then back to Salesforce (ridiculous I know).
So I am stuck.....
I thought that as of Spring 13' Chatter API is accessible without any special authentication from Javascript on a VF page.
Is that true?
Will this url work without any auth header when called from javascript on a VF page? https://cs2.salesforce.com/services/data/v35.0/chatter/files/{docId}/content?versionNumber=1
It doesnt seem to work for me and definitely wont work when going via google viewer.
Would really appreciate any suggestions how to do this?
Thanks
Please dont hate me, I am trying to get some rep.
You can query the static resources for the docid and load the file by ajax request on the VF page.
After that its a matter of using data:image/png;base64 added to the base64 to add it to a canvas. You can also add a download tag to the canvas so it will download or open it in another window will give the user the browser pdf explorer.
If you use canvas be careful with Safari when you resize. If you get a really long number it will crap out on the canvas. I spent hours on that one.
I hope that helps.

Save webpages for offline access in web app

I have a web app (sencha/phonegap) that includes a feature allowing users to click on buttons that link to Wikipedia articles. This obviously works fine if the device has internet access, but I get numerous requests to make the app work when the app is offline too. To accomplish this, I'd like to give the user the option to download the linked articles/webpages for offline access. When the device does not have internet access, the app would instead display the saved version (which might be stale/out-of-date, but is better than nothing). What are possible ways to accomplish this task?
My first thought was to somehow use the html manifest to cache the pages in the phone's browser, which sounds possible on the Android browser, but iOS apparently has a 5MB browser cache limit - too small.
My next thought was to save the needed html & associated files and bundle them up inside the app. But this seems a rather cumbersome approach, the app becomes much larger than it needs to be, and the webpages are stale back to the date the app was installed.
Using javascript, is it possible to download webpages, which I could then save (on the sd card, for example) for access later?
Or is there a more elegant approach?
If anyone could point me in the right direction it would be much appreciated.
In pure Javascript you can make an Ajax request to download a page. Then you can use the FileWriter to write the responseText to a file on the file system. However, that won't help you when it comes to images. You'll need to use the FileTransfer.download() command to get the binary image files.
If I were you I'd:
Use AJAX to download the html.
Parse the html looking for images.
Use FileTransfer.download to get the images.

Categories