Voici les exigences, les utilisateurs doivent pouvoir afficher les fichiers PDF téléchargés dans le navigateur. Ils doivent pouvoir ajouter des notes au PDF et enregistrer le PDF mis à jour sur le serveur sans devoir l'enregistrer sur leur machine et l'ouvrir en dehors du navigateur. Comment modifier un pdf dans le navigateur et l'enregistrer sur le serveur
Toutes les idées sur la façon d'y parvenir sont les bienvenues.
par la façon dont je travaille avec un site web asp.net (en C#).
Je ne contrôle pas sur ce que le pdf ressemble. Il est téléchargé côté client alors que les autres utilisateurs ont besoin de voir et une note sur le dessus du pdf.
La solution que je pensais est de rendre le PDF à un jpeg et utiliser javascript pour tracer les coordonnées de l'endroit où doit aller la note.
Voici un exemple rapide du html et javascript qui créent le JSON de la note
<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>
Alors maintenant, je dois savoir comment (en utilisant jQuery.):
- Afficher un fichier pdf au format .jpeg.
- Recréez le fichier PDF en y ajoutant les annotations.
vous pouvez obtenir le dernier code pour l'encapsuleur GhostscriptSharp Ghostscript à http://github.com/mephraim/ghostscriptsharp –