Ecco i requisiti, gli utenti devono essere in grado di visualizzare i PDF caricati nel browser. Devono essere in grado di aggiungere note al PDF e salvare il PDF aggiornato sul server senza doverlo salvare sul proprio computer e aprirlo fuori dal browser. Come modificare un pdf nel browser e salvarlo sul server
Tutte le idee su come ottenere questo risultato sono benvenute.
dal modo in cui sto lavorando con un sito Web asp.net (in C#).
non ho alcun controllo su ciò che il pdf assomiglia. Viene caricato sul lato client, quindi gli altri utenti devono visualizzare e le note sopra il pdf.
La soluzione che ho pensato è quello di rendere il PDF in formato jpeg e utilizzare javascript per tracciare le coordinate del luogo in cui la nota deve andare.
ecco un breve esempio di HTML e JavaScript che creano il JSON di nota
<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>
Così ora ho bisogno di capire come (utilizzando jQuery.):
- Renderizza un pdf in jpeg.
- Ricrea il PDF inserendo le annotazioni su di esso.
puoi ottenere l'ultimo codice per il wrapper GhostscriptSharp Ghostscript all'indirizzo http://github.com/mephraim/ghostscriptsharp –