使用javascript渲染带注释的PDF

时间:2014-06-05 12:12:18

标签: javascript jquery pdf

我正在开发一个用php / javascrit编写的web应用程序,jquery开发的应用程序的一部分是渲染PDF,加载和渲染pdf的代码写在一个名为pdfreader.js的单独的js文件中pdf.js文件作为库包含在内。

现在我试图允许用户通过点击文本应该出现的文字后面的按钮向pdf添加注释然后他可以开始在页面的任何部分添加注释,然后他可以将PDF文件添加到他的计算机。一旦用户点击添加注释按钮,我不知道如何在按钮和文本之间建立连接以显示textarea的问题。

HTML代码

<button class="annotComment" style="float:left">Add Annotation</button>
<input id="fileInput" type="file" name="pdf_file"/>
<div class="separator"></div>

的javascript

WEBSOCKETPDFREADER.getAnnotation = function(contentid){
 if (pageNumber >= 1) 
  return;
 var points = [];
 $("#com_pdf_viewer").click(function(e) {
    if ($("textarea.annotComment").length == 0) {
        var that = this;
        var txt = $("<textarea class='annotComment'></textarea>").css({ top: e.pageY,
         left: e.pageX }).blur(function() { $(this).remove(); }).keypress(function(e2)   
           {
            if (e2.keyCode == 13 && !e.shiftKey) {
                var that2 = this;
                $("#com_pdf_viewer").append($("<div 
                 class='annotComment'>").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(); })
    }
}); 

 WEBSOCKETPDFREADER.send(pageNum,contentid,AllactiveModulesPDFReader[contentid]    
 ['userID'],'setPage',contentid);

  WEBSOCKETPDFREADER.renderPage(pageNum);    

}

我是否以正确的方式或应该更改代码,还是可以使用任何其他库来添加注释。有什么建议可以解决这个问题吗?!在此先感谢您的帮助..

此致 玫瑰

0 个答案:

没有答案