I need to render a PDF document in web browser (HTML5).
User should be able to make a selection for annotation (text or area).
Render html elements on the annotation (check-boxes, drop-down) received through ajax.
User's choice will be sent to back-end along with the selection/annotation made.
I should be able to render the annotations made again on the PDF.
Which frameworks should I use to create this solution? I'm happy to use open source frameworks as well as licensed SDKs. I can manage handling back-end using Node.js and interactions with ajax calls.
I did some research and found that I can use PDF.js for rendering PDF. Found many solutions to annonate but they cannot be used to render HTML elements on an annotation. I'm happy to get PSPDFKit but no way to create html elements on PDF.
I found two solutions and I'm really happy with them.
Annotate.co
PSPDFKit
Almost everything needed is there.
Related
I am currently making an offline web app that will dynamically populate drop down menu items using XML data. I am looking for suggestions on how best to approach this, given that local ajax calls are prohibited by most modern browsers. Unfortunately, it absolutely has to be offline. I am not sure if there is a way to do this with appcache, or if I should attempt to do it with XSLT and Xpath, etc. I am using jQuery for the styling, and would prefer to be able to use that, but can work around it if it is not compatible with the solution. Thank you in Advance!
I want an embedded PDF on my HTML 5 web page. I was looking at different viewers like PDFObject 2.0. This works well for viewing, but I have a requirement where the user must read the entire document (scroll or page to the end), and then I can enable a button for them to click on. This is for a legal compliance situation.
What types of code hooks are there when doing an embed of a PDF document using PDFObject 2.0 for finding out when the user has reached the end of the document (scroll to end or last page).
I believe PDFObject is like a wrapper that helps render the PDF under different browser conditions including mobile, tablets and desktop scenarios, and this request may not be possible without using PDF.js and customizing the code and then dealing with all the browser scenarios myself.
PDFObject only embeds the PDF within the HTML page, it does not provide any additional functionality. Currently, most built-in PDF rendering engines do not even provide a JavaScript API.
As far as I know, there is no way to prove someone has read (or navigated) through an entire PDF; that's why compliance web sites typically just present the user with a checkbox, something along the lines of "Check here to indicate you have read and agree with this document".
If you absolutely must find a way to ensure someone has navigated to the final page of the document -- which, let me remind you, does not imply they read anything -- you might be able to put something together with PDF.js. The PDF.js utility is a JavaScript-based PDF rendering engine. You can force the PDF to be rendered via PDF.js (PDFObject.com has examples for this); since PDF.js is JavaScript-based and open-source, you might be able to hack something together using the PDF.js API.
I have a node.js application that accesses data of a MySQL database and I want to generate charts from that data dynamically, to pipe it as image (PNG/JPG) through a HTTP server to the user. I've search for a little while now, but I was unable to find a library to do this without the HTML/canvas approach. Since I want to let the server do the rendering to use the graph in emails or also dynamically rendered PDF files, this isn't an option here.
What could be the approach here (with or without a library) ?
Edit to provide proof of own work: I found https://plot.ly, which is in terms of usage and result really close to fulfil my needs, but requires an internet connection, since it calls a remote API.
You could also try asking this in the Software Recs Stack Overflow. But one option that seems like it could fit your needs is ZingChart.
They have a phantomJS build for rendering static versions of charts. In addition, licensed users can access a Node.js build for server side charting.
Full disclosure, I'm on the ZingChart team so please let me know if I can help you review all your options.
There is a node wrapper for the chart library chartist. You could use this library to generate a SVG, and a svg2png lib to convert to PNG.
Well there are multiple options, I would use phantomjs (headless Webkit browser) to render the charts.
Why would this option be good? One of the reasons is that you don't need duplicated code for the server and client side coding, you could simply reuse the code. On server side create a html file with required scripts and data and render it.
I'm developing a Rails web app using the contentEditable feature of HTML 5, in the style of Google Docs and others. This works well for simple typing, but breaks whenever the user tries to paste text from Word or another webpage. The resulting HTML will be littered with style attributes and will look like it was literally cut and pasted from the source.
I need to filter the HTML some way. This can be done client-side, giving a smooth interface for the user where pasted material fits instantly into my app's style.
Of course, the user can override my filtering. So to protect myself fully from tag soup hell, I would need to perform the same filtering again, server-side. This is similar to the form validation problem.
I don't want to duplicate the filtering logic in both jQuery (client-side) and Ruby (server-side) but I don't know if there's any good way to avoid it. So far I have identified two possibilities:
Implement all filtering server-side, access it from the client by AJAX. This will put a heavy load on the server.
Implement filtering fully in JS, run on client and on server through Node.js. I don't know if there is enough similarity between the two platforms to implement a shared filtering routine. Libraries like Cheerio look promising though.
Has anyone solved a similar problem before? I would appreciate any guidance to keep my app as DRY as possible.
I want to be able to send a piece of html Dom by email, in a similar fashion I use jqPrint jQuery plugin to print a partial dom. Has anyone seen a project like that?
When a user interacts with my site having a bunch of ExtJs components and RichFaces rendered components, they will want to print/email part of their work in progress as a screen capture for audit purposes. I want to gather up part of the dom, serialize it and send it back to the server, from where I would initiate the email that will look more or less like the screen a user was seeing prior to initiating this action.
Any suggestions?
Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/