如何在浏览器中编辑pdf并将其保存到服务器

Posted 2023-02-24

技术标签:

【中文标题】如何在浏览器中编辑pdf并将其保存到服务器【英文标题】：How to edit a pdf in the browser and save it to the server 【发布时间】：2011-01-18 12:37:30 【问题描述】：

以下是要求，用户需要能够在浏览器中查看上传的 PDF。他们需要能够向 PDF 添加注释并将更新的 PDF 保存到服务器，而不必将其保存到他们的机器并在浏览器之外打开它。

欢迎任何关于如何实现这一目标的想法。

顺便说一句，我正在使用一个 asp.net 网站（使用 C#）。

我无法控制 pdf 的外观。它在客户端上传，然后其他用户需要查看并在 pdf 顶部添加注释。

我正在考虑的解决方案是将 PDF 呈现为 jpeg 并使用 javascript 绘制笔记应该去的坐标。

这是创建注意的 json 的 html 和 javascript 的快速示例（使用 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>

所以现在我需要弄清楚如何：

将 pdf 渲染为 jpeg。重新创建 PDF，将注释放在上面。

【问题讨论】：

【参考方案1】：

您可以使用 GhostScript 将 PDF 呈现为 JPEG。命令行示例：

gswin32c.exe -dSAFER -dBATCH -dNOPAUSE -sDEVICE=jpeg -r300 -sOutputFile=output.jpg input.pdf

您需要通过命令行版本（如上）或使用包装器调用 GhostScript。谷歌搜索出现了这篇博文：

A Simple C# Wrapper for Ghostscript

要创建新的 PDF，您有两个主要选择：

修改JPEG并将JPEG转换为PDF（可以使用GhsotScript进行转换）使用可导入原始 PDF 并在其上添加数据的 PDF 库

对于 PDF 库，请参阅这个 SO 问题：

Building PDF Files with C#

【讨论】：

您可以在github.com/mephraim/ghostscriptsharp获取 GhostscriptSharp Ghostscript 包装器的最新代码【参考方案2】：

我的公司Atalasoft 提供的组件可让您查看文档图像（包括 PDF）并对其进行注释并将注释保存回 PDF。在我们的产品套件中，您需要 dotImage 文档成像和 PDF 阅读器插件。您将通过我们的 AJAX Web 控件使用 dotAnnotate。这是link to our online demo - 显示的文档是 TIFF，但您也可以使用 PDF。

【讨论】：

在线演示链接已失效。它还在某处可用吗？我不再在 Atalasoft。我会联系销售或支持部门以了解它的去向。【参考方案3】：

我认为您不能让用户在浏览器中加载 pdf，对其进行编辑，然后将其保存到服务器，而无需将其保存到他们的计算机，然后将其上传到服务器。

您可以做的是设置一个带有可以表示 pdf 的数据库后端的网络表单，当他们编辑它时，您可以使用 itextsharp 重新生成 PDF 并从数据库中加载信息，这样当用户返回编辑时PDF，您可以使用已存在的内容预填充表单。

itextsharp 非常好用，这里有一个例子：

string sourceFile = "path/to/pdfTemplate.pdf";
PdfReader reader = new PdfReader(sourceFile);
PdfStamper stamper = new PdfStamper(reader, new FileStream("path/to/store/pdf/filename.pdf", FileMode.Create));
AcroFields fields = stamper.AcroFields;

//now assign fields in the form to values from your form

fields.SetField("input1", input1.Text);
fields.SetField("input2", input2.Text);

//close the pdf after filling out fields

stamper.SetFullCompression();
stamper.FormFlattening = true;
stamper.Close();

如果您想显示实际的 PDF，您可以轻松

Response.Redirect("path/to/store/pdf/filename.pdf");

【讨论】：

有可能。看我的回答【参考方案4】：

我们在 Spring/Java 平台上使用 lowagie 来做到这一点。

用户会看到预先生成的销售税申报表，并且可以在几个字段中添加某些手动调整。然后，我们根据手动输入重新计算总计字段，并将整个数据保存回我们的数据库。

【讨论】：

【参考方案5】：

您可以使用 PDFSharp 或 itextsharp 创建注释。没有尝试过 PDFSharp 注释，但 iTextSharp 确实有效。您必须在服务器端处理编辑。可能将文件复制到临时文件夹编辑它并将其保存回来。

你会在http://itextsharp.sourceforge.net找到itextsharp，注释示例：页面底部http://itextsharp.sourceforge.net/tutorial/ch03.html

pdfsharp：http://www.pdfsharp.net

【讨论】：

【参考方案6】：

如果您能够购买第三方库，我非常推荐 TxTextControl。 http://www.textcontrol.com/en_US/

使用此控件，您可以编写一个编辑器，让您将 pdf 用作模板并允许用户进行更改并保存它们。所有在浏览器中，无需在计算机上手动选择临时文件。访问很像使用普通 TextBox 的 TextProperty。

【讨论】：

解决方案不错，但许可成本对于小型项目来说是个问题。【参考方案7】：

您没有具体说明您有哪些技术限制。如果您可以考虑使用 Silverlight 解决方案，并且您拥有支持 Silverlight 的客户端计算机，那么您可以轻松地做到这一点。

看看 Microsoft Sketchflow 是如何工作的，它允许用户在 Web 浏览器中对文档进行注释，并且注释被持久化回服务器。

这里有一家公司用commercial control 来注释 PDF（和其他格式）。

微软在他们的 Sketchflow 播放器中做到了这一点。这是video。当然，您不会使用sketchflow，而是使用类似的东西来满足您的需求。

作为一个额外的好处，Silverlight 4 支持剪贴板以及拖放功能，因此最终用户可以将某些内容粘贴到 PDF 图像上，也可以将任何文件拖到上面，然后您就可以上传到您的服务器。

【讨论】：

以上是关于如何在浏览器中编辑pdf并将其保存到服务器的主要内容，如果未能解决你的问题，请参考以下文章

扫描图像并将其像 pdf 一样保存到数据库 c#

如何使用CakePdf创建和下载PDF，而不是在浏览器中显示它

从数据库中提取 pdf 并将其显示在我的 cshtml 上

从 iPhone 浏览 PDF 文件并上传到服务器

使用 Swift 5 - PDFKit 在 iOS 中编辑和保存现有的 pdf 文档

使用 php 将 PDF 文件保存到 XML 文件