How to edit a pdf in the browser and save it to the server

c# .net asp.net pdf pdf-generation

13,257

Solution 1

You can use GhostScript to render a PDF to JPEG.
Command line example:

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

You need to call GhostScript via the command line version (as above) or use a wrapper. A Google search turned up this blog post:

A Simple C# Wrapper for Ghostscript

For creating a new PDF you have two main alternatives:

Modify the JPEG and convert the JPEG into PDF (you can use GhsotScript for the conversion)
Use A PDF library that imports your original PDF and add data on top of that

For PDF libraries see this SO question:

Building PDF Files with C#

Solution 2

My company, Atalasoft, provides components that let you view document images, including PDFs and annotate them and save the annotations back into the PDF. In our product suite, you would need dotImage document imaging and the PDF Reader add-on. You would be using dotAnnotate through our AJAX web controls. Here is a link to our online demo - the document displayed is a TIFF, but you could use a PDF too.

Solution 3

I don't think you will be able to have a user load a pdf in their browser, edit it, then save it to the server without them saving it to their machine and then uploading it to the server.

What you can do is setup a webform with a database backend that can represent the pdf, and when they edit it you can regenerate the PDF using itextsharp and loading the information from the database, that way when the user goes back to edit the PDF you can prepopulate the form with what already exists.

itextsharp is extremely easy to use, here is an example:

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();

then if you wanted to show the actual PDF you could easily

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

Solution 4

You can use either PDFSharp or itextsharp to create annotations. Haven't tried PDFSharp annotation but iTextSharp does work. You'll have to handle the editing on the server side. probably copy the file to a temp folder edit it and save it back.

You'll find itextsharp at http://itextsharp.sourceforge.net, annotation example: bottom at the page http://itextsharp.sourceforge.net/tutorial/ch03.html

pdfsharp: http://www.pdfsharp.net

Solution 5

If you are able to buy a third party library I'd pretty much recommend TxTextControl. http://www.textcontrol.com/en_US/

With this control you can write an editor, that lets you use your pdf as a template and allows the user make changes and save them. All within the browser, without the need to manually select a tempfile on the computer. Acessing is pretty much like using the TextProperty of a normal TextBox.

View more solutions

13,257

Author by

Kenneth J

Updated on June 23, 2022

Comments

Kenneth J almost 2 years

Here are the requirements, the users needs to be able to view uploaded PDFs in the browser. They need to be able to add notes to the PDF and save the updated PDF to the server without having to save it to their machine and open it outside the browser.

Any ideas on how to achieve this are welcomed.

by the way I am working with an asp.net website (in C#).

I have no control over what the pdf looks like. It is uploaded client-side then other users need to view and an notes on top of the pdf.

The solution that I was thinking is to render the PDF to a jpeg and use javascript to plot coordinates of where the note should go.

here is a quick example of the html and javascript that create the json of note (using 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>

So now I need to figure out how to:

Render a pdf to jpeg.

Recreate the PDF putting the annotations on top on it.

citronas about 14 years

It is possible. Look at my answer
Matt Ephraim about 14 years

you can get the latest code for the GhostscriptSharp Ghostscript wrapper at github.com/mephraim/ghostscriptsharp
Roman Royter almost 13 years

The solution is nice but the licensing cost is an issue for small projects.
Sky about 7 years

The online demo link doesn't work any more. Is it still available somewhere?
plinth about 7 years

I'm no longer at Atalasoft. I would contact the sales or support department to find out where it has gone.