Menu
Here are the requirements, the users needs to be able to view uploaded PDFs in the browser. They need to be able to add notes to the PDF and save the updated PDF to the server without having to save it to their machine and open it outside the browser.
Any ideas on how to achieve this are welcomed.
by the way I am working with an asp.net website (in C#).
I have no control over what the pdf looks like. It is uploaded client-side then other users need to view and an notes on top of the pdf.
The solution that I was thinking is to render the PDF to a jpeg and use javascript to plot coordinates of where the note should go.
here is a quick example of the html and javascript that create the json of note (using jQuery.)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#PDF
{
position:absolute;
top:0;
bottom:0;
width:600px;
height:800px;
background:url(assets/images/gray.png) repeat;
float:left;
}
#results
{
float:right;
}
.comment
{
position:absolute;
border:none;
background-color:Transparent;
height:300px;
width:100px;
overflow:auto;
float:left;
top:0;
right:0;
font-family: Arial;
font-size:12px;
}
div.comment
{
padding-top:-20px;
}
.comment a.button
{
display:block;
padding-top:-20px;
}
</style>
</head>
<body>
<div>
<div id="PDF"></div>
<div id="results">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
var points = [];
$("#PDF").click(function(e) {
if ($("textarea.comment").length == 0) {
var that = this;
var txt = $("<textarea class='comment'></textarea>").css({ top: e.pageY, left: e.pageX }).blur(function() { $(this).remove(); }).keypress(function(e2) {
if (e2.keyCode == 13 && !e.shiftKey) {
var that2 = this;
$("#PDF").append($("<div class='comment'>").html(that2.value.replace(/\r/gi, "<br>")).css({ top: e.pageY, left: e.pageX }));
$(this).remove();
points.push({ "x": e.pageX, "y": e.pageY, "text": that2.value })
$("#results").append('{ "x": ' + e.pageX + ', "y": ' + e.pageY + ', "text": "' + that2.value + '" }<br/>');
}
});
$(this).append(txt);
txt.each(function() { this.focus(); })
}
});
</script>
So now I need to figure out how to:
566
Adobe has finally rolled out an update of the Acrobat extension of Google Chrome which now allows users to edit PDF files on the browser itself.
You can use GhostScript to render a PDF to JPEG.
Command line example:
gswin32c.exe -dSAFER -dBATCH -dNOPAUSE -sDEVICE=jpeg -r300 -sOutputFile=output.jpg input.pdf
You need to call GhostScript via the command line version (as above) or use a wrapper. A Google search turned up this blog post:
For creating a new PDF you have two main alternatives:
For PDF libraries see this SO question:
125
My company, Atalasoft, provides components that let you view document images, including PDFs and annotate them and save the annotations back into the PDF. In our product suite, you would need dotImage document imaging and the PDF Reader add-on. You would be using dotAnnotate through our AJAX web controls. Here is a link to our online demo - the document displayed is a TIFF, but you could use a PDF too.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
