Как отредактировать pdf в браузере и сохранить его на сервере
Вот требования, пользователи должны иметь возможность просматривать загруженные PDF-файлы в браузере. Они должны иметь возможность добавлять заметки в PDF-файл и сохранять обновленный PDF-файл на сервере, не сохраняя его на своем компьютере и открывая его вне браузера.
Любые идеи о том, как этого добиться, приветствуются.
Кстати, я работаю с сайтом asp.net (в C #).
Я не имею никакого контроля над тем, как выглядит PDF. Он загружается на стороне клиента, тогда другие пользователи должны просмотреть и заметки в верхней части PDF.
Решение, о котором я подумал, - сделать PDF-файл в формате jpeg и использовать javascript для построения координат того, куда должна идти заметка.
Вот краткий пример HTML и Javascript, которые создают JSON заметки (с использованием 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>
Итак, теперь мне нужно выяснить, как: