Estos son los requisitos, los usuarios deben poder ver los archivos PDF cargados en el navegador. Deben poder agregar notas al PDF y guardar el PDF actualizado en el servidor sin tener que guardarlo en su equipo y abrirlo fuera del navegador. Cómo editar un pdf en el navegador y guardarlo en el servidor
Se agradecen todas las ideas sobre cómo lograr esto.
por cierto estoy trabajando con un sitio web asp.net (en C#).
que no tienen control sobre lo que el pdf se parece. Se carga desde el lado del cliente y luego otros usuarios necesitan ver y notas en la parte superior del pdf.
La solución que estaba pensando es hacer que el PDF a un archivo JPEG y utilizar javascript para trazar las coordenadas de donde la nota debe ir.
aquí es un ejemplo rápido del HTML y JavaScript que crean el JSON de la 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>
Así que ahora tengo que encontrar la manera de (usando jQuery.):
- Renderiza un pdf a jpeg.
- Recrea el PDF colocando las anotaciones sobre él.
Puede obtener el último código para el contenedor de GhostscriptSharp Ghostscript en http://github.com/mephraim/ghostscriptsharp –