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.
Related
I have a Google Drive folder with images in it, which needs to be kept "Restricted: Only people added can open with this link" because our Drive needs to stay HIPAA Compliant. I created a web app where users log in using their Google accounts and should be able to view those images directly from the web app (because they also have access to the Google Drive folder). I was able to embed the images using the following link structure: https://drive.google.com/uc?export=view&id= + [fileID] .
It works great on Chrome but does not work on Safari and on mobile devices - it simply shows a blank image, although it appears when I go to the image's link. When I make the folder public it works on all browsers/devices, so I assume the issue is with the restricted access. Is there a way to circumvent this?
Idea: Since I have the users authentication tokens, I was thinking I could make an iFrame where I load the image URL and I set the cookies using their tokens, so Drive would know that they have access to the images. Thoughts?
Just a thought, but how about using blob by sending a request via Javascript with proper Authorization header and embedding images via one?
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.
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.
I'm making a Web-App (still in "Beta") which uses the Flickr API to get information for the photos of a particular Flickr user and generates IPB code to post any of his/her images.
While Flickr now gives you the IPB code to show the image and link back to the photo site directly on its site, my App also has the option of embeding the title, description, select EXIF data, location information, etc. into the post for the IPB forum.
I've most recently added the option to integrate a Google Maps image of the photo's geolocation data into the post by using the Google Static Maps API.
The problem is that the image URL I have is in the following form (including IPB [IMG] tags):
[IMG]http://maps.google.com/maps/api/staticmap?zoom=16&size=600x600&maptype=hybrid&markers=19.387687,-99.251732&sensor=false[/IMG]
Which shows this example image (In practice the image size is user selectable):
However, some IPB forums seem to not support dyamic image URLs which gives me a broken image, I'd like to replace the
[IMG]http://maps.google.com/maps/api/staticmap?zoom=16&size=600x600&maptype=hybrid&markers=19.387687,-99.251732&sensor=false[/IMG]
with something like
[IMG]http://maps.google.com/maps/api/staticmap/map0000001.png[/IMG]
which should be supported by all IPB forums. Thanks in advance for your help.
In case you're interested, the most recent "released" version of my Web-App can be found here: http://flickr.argote.mx/ (The changes I mention here are still on local development server).
There are two types of solution as far as I can see:
You create a proxy server to download the images from Google and serve it on nice URLs to the clients. The disadvantage is that you will have to handle a high traffic through your servers (I don't know much about your project you have to decide about performance)
You create a special BBCODE to handle your URLs and you can use that on any IPB forums
+1: You could create a serverside script with nice URLs to redirect to the Google URLs but the problem is you never know how the different browsers will handle it. I suppose they normally don't follow URLs for images inside pages.
+2: Ask Google to support nice URLs ;)
Hope that helps.
You should be able to use a URL shortener service, as long as the service supports simple 301 redirects to image resources. You'd have to try out which ones do.
For example, bit.ly has a REST API. It allows you to make calls like this from within PHP:
http://api.bitly.com/v3/shorten?login=abc&apiKey=123&longUrl={myurl}&format=json
returning a bit.ly URL that you can use in BBCode.
Edit: According to this JSFiddle, this method works, at least in Chrome and IE8. It would still need scrupulous testing across browsers.
Since both Aston's suggestions are out of the question, maybe you can set up a simple script that redirects the request to Google Maps images (instead of a proxy)?
So you can have something like http://my-simple-script.tld/lat,lng have that script redirect to the correct Google Maps static image URL.
I would like to create a Web App for device. For that I would have some script being stored on device, instead of downloading them all time when I start application. As far as I saw including a GoogleMaps API makes some additional request for javascript files. Is there any way of having all of them taken directly from local store? Or is this always have to refeer to google web address? Thanks for any answers here!
No, you always must load them from the Google site. They offer no way to run Google Maps locally. The GMaps scripts are generated on the fly, based upon (among others, I'm sure) the HTTP_REFERER header of the request. That's how they can bind an API key to a specific website.