How to Download annotate PDF ? #40

rmemon · 2017-07-21T10:11:37Z

After adding certain annotation, how to download annotate pdf,
Thanks in advance

KaneMorgan · 2017-07-21T14:24:07Z

So the library doesn't actually create an annotated pdf file. It works by putting an overlay on top of the rendered pdf with the annotations.

The annotations are just stored in JSON in the browsers local storage, if you want to use them elsewhere you might be able to implement a store adapter to get the JSON out but you'd probably still need this library to render them

fdbatista · 2017-09-01T16:28:31Z

In my case, I save annotations in database. I have a controller action for download which reads original pdf file using fpdi, retrieves annotations from database, inserts them into pdf using tcpdf and finally returns the new annotated pdf also with tcpdf.

rmemon · 2017-09-03T08:02:35Z

Hi @fdbatista thank you, I did it using same rule, only difference i have not use tcpdf or fpdi, I build my own custom code written in node, Please find the URL, draw some annotation and press on download button.

https://pdf-annotate.herokuapp.com/

I will also look to try for fpdi and tcpdf in my free time, Thanks

ghost · 2017-10-06T10:00:05Z

Hi @rmemon I am working on PHP and i am making pdf annotation. Could you tell me How to integrate Download button my PDF annotation in php without using tcpdf or fpdi.

RameshSenagasetti · 2017-10-12T14:01:36Z

Hi @rmemon thank you, can you help me out in doing the download the annotated PDF using node stuff as I am struggling with same issue.

ajile-in · 2017-10-25T09:42:47Z

I have built my custom code on the back-end using C#.NET which parses the JSON annotations and creates those annotations in PDF.

However, I am facing issues with coordinates positions with some annotations such as 'drawing'

Mariachi1231 · 2017-10-25T15:07:06Z

Hi @jadhavajay, can you share your code?

gaganmurghai · 2018-04-04T13:01:33Z

@fdbatista
I am new with this and trying to create pdf with saved annotations in database.
When I am trying to use stored annotations from database, the location of those annotation are not on same position with x and y coordinates of PDF. Can you please help me out with this.

fdbatista · 2018-04-04T13:09:33Z

Hi, @gaganmurghai.

That might be a problem with the measure unit you're using. When you instantiate the FPDI object, you must pass a parameter that specifies the measurement unit, like this:

$pdf = new FPDI('', 'pt', 'A4', true, 'UTF-8', false, false);

If I'm not wrong, because I haven't touched this code in a while, the 2nd parameter stands for Points. There are also pixels, millimeters and so one, but Points work for me.

Happy coding.

fdbatista · 2018-04-04T13:58:18Z

I already did.
Here you instantiate the FPDI object and insert comments loaded from a database via an api request.
In my case, I use PHP for building the RESTful API. This depends on your own business logic.

$pdf = new FPDI('', 'pt', 'A4', true, 'UTF-8', false, false);

try {
$file_name = "Test.pdf";
$annotations_url = "http://my-server/api/annotations?document_id=$file_name"; //this is my API function
$annotations = file_get_contents($annotations_url);
$json = NULL;
if ($annotations) {
$json = json_decode(json_decode($annotations));
}
$pageCount = $pdf->setSourceFile("../../items/$id/$file_name");
for ($i = 1; $i <= $pageCount; $i++) {
$tplIdx = $pdf->importPage($i, '/MediaBox');
$pdf->AddPage();
if ($json) {
foreach ($json as $annotation) {
$pdf->Annotation($curr_annotation->x, $curr_annotation->y, 100, 70, $annotation[1]->content, ['Subtype' => 'Text', 'Name' => 'Comment', 'C' => array(255, 255, 0)]);
}
}
$pdf->useTemplate($tplIdx);
}
$pdf->Output($file_name, 'D');
} catch (Exception $exc) {
$pdf->AddPage();
$pdf->Text(200, 200, $exc->getMessage());
$pdf->Output('Exception', 'D');
}

gaganmurghai · 2018-04-04T14:01:26Z

@fdbatista thanks for sharing the code. I am using almost same logic but it doesn't work. Let me try again and I will get back to you. Again thank you very much.

gaganmurghai · 2018-04-04T14:10:59Z

@fdbatista Can I use image instead of text annotation. Actually I have tired Image for this

$pdf->Image('images/image_demo.jpg', 15, 140, 75, 113, 'JPG', 'http://www.tcpdf.org', '', true, 150, '', false, false, 1, false, false, false);

But when I am passing x and y coordinates it changes the position. Have you any Idea for that. And also I want to add image on particular page. When I was trying previous code it parse the image on all the pages. Please me know if you have any idea for the same

fdbatista · 2018-04-04T14:24:44Z

About the position, try changing the unit, as I said previously.
And this method allows you to add a new page to work on it:

$pdf->AddPage();

gaganmurghai · 2018-04-04T14:50:04Z

thanks @fdbatista I will try it.

gaganmurghai · 2018-04-18T14:41:55Z

@rmemon @fdbatista @KaneMorgan Hello guys, I am looking for alternate of fpdi and tcpdf in node js. Actually I have built the functionality to download Pdf with annotations in php but now as per my requirements I need this in node Js.
Please help me out in this.

rmemon · 2018-04-18T15:17:56Z

Hi @gaganmurghai
Try using
HummusJS : Node.js module for creation, modification and parsing of PDF files.

gaganmurghai · 2018-04-19T11:57:54Z

@rmemon thanks, I will try this one.

Vishnupriya112 · 2018-04-20T05:22:45Z

@rmemon could you pls share me the code

gaganmurghai · 2018-04-20T06:33:29Z

@Vishnupriya112 @rmemon
Actually I am unable to install HummusJs in my current project. I am facing this issue galkahana/HummusJS#269.

If possible can you please guide me and please share some code. It will be really helpful for me.

Thanks in advance.

rmemon · 2018-04-21T07:28:34Z

Hi @Vishnupriya112 @gaganmurghai

I am Sharing code to draw Circle, at position X:400, Y: 400, radius: 30 , page: 1

var resultPath  = PATH_TO_RESULT_FILE,    
     sourcePath = PATH_TO_SOURCE_FILE,
     logFilePath = PATH_TO_LOG_FILE;

var hummus = require('hummus');
var pdfWriter = hummus.createWriterToModify(sourcePath, {
    modifiedFilePath: resultPath,
    log: logFilePath
});

var pageModifier = new hummus.PDFPageModifier(pdfWriter, 0, true);
var cxt = pageModifier.startContext().getContext();

cxt.drawCircle(400, 400, 30, {
    type: 'fill',
    color: 'red',
});

pageModifier.endContext().writePage();
pdfWriter.end();

Let me know in a case of any concerns.

BharatDevda · 2018-05-02T14:32:35Z

Hi @rmemon

Please provide some valuable solution for below issue.

Messy content in pdf after second page. (Already i was Tried Bugfix #57 )
2.Helpful hints for Download Pdf with annotation.

Thanks in advance.

aathirag · 2018-05-11T09:58:07Z

I have tried this because of annotaion size is big Request Aborted is shows.How can I overcome this issue

gaganmurghai · 2018-05-12T08:46:34Z

Hello @rmemon as you mentioned in above code "I am Sharing code to draw Circle, at position X:400, Y: 400, radius: 30 , page: 1".

I am not able to found the page that where I need to add this parameter in code i.e page number.

Please suggest me.

Thanks

rmemon · 2018-05-13T06:56:52Z

Hi @gaganmurghai

Please provide your page number parameter here,

var pageModifier = new hummus.PDFPageModifier(pdfWriter,page_number,true); // page_number [0,1,2,3....,]

gaganmurghai · 2018-05-14T06:05:13Z

Thanks a lot @rmemon

gaganmurghai · 2018-05-15T14:25:07Z

Hello @rmemon,
Thanks for the help but I am stuck with some another issue. I am trying to write large pdf file more than 2MB but file has been corrupted after run the script. Can you please help me out in this.

rmemon · 2018-05-15T16:38:15Z

@gaganmurghai Can share PDF ??

gaganmurghai · 2018-05-16T08:13:00Z

@rmemon thanks there was issue with pdf.

Now I am trying to Place image on pdf and I am passing the x,y coordinates on in code but its not showing the image on appropriate place. Can you have any idea. I think there is a issue with measurement unit.

Also I want to place images on multiple pages. Please help me this in too.

How we can define number of pages.

As you have mentioned I have tried this but it was not working.

var pageModifier = new hummus.PDFPageModifier(pdfWriter,page_number,true); // page_number [0,1,2,3....,]

Thanks again.

aathirag · 2018-05-16T08:29:19Z

101100_hbs (1)_1.pdf

this file is not downloading.

rmemon · 2018-05-16T10:37:57Z

@aathirag Thanks i will look for this pdf, shortly.

gaganmurghai · 2018-05-16T12:58:22Z

@rmemon I want to add multiple images on multiple pages. But only able to add one image at a time. Please help me out in this.

Here is my sample code.

 ` var resultPath = "./downloads/" + pdfkey,
   sourcePath = "./downloads/" + pdfkey,
   logFilePath = "/var/www/html/lowrate-latest/lowrate/backend/LowRate_API/log.text";

   var hummus = require('hummus');
   var pdfWriter = hummus.createWriterToModify(sourcePath, {
      modifiedFilePath: resultPath,
      log: logFilePath
  });


var itemsProcessedDone = 0;
var itemsProcessed = 0;
var itemsProcessedNext = 0;
var cxt;
var pageModifier;



AnnotaionObj.forEach(element => {

   var pageNumber = element.pageNumber - 1;
   pageNumber = parseInt(pageNumber);
   console.log(pageNumber + " pageNumber");
   var pageModifier = new hummus.PDFPageModifier(pdfWriter, pageNumber, true);
   var cxt = pageModifier.startContext().getContext();

   if (element.ImageUrl != "" && element.ImageUrl != undefined) {

     //getting file name 
     let filenameary = element.ImageUrl.split('/');
     let path = "./downloads/" + filenameary[3];
     cxt.drawImage(element.x, element.y, path, {
         transformation: {
             width: 100,
             height: 40,
             proportional: false
         }
     });
   
   }
   pageModifier.endContext().writePage();

   itemsProcessed++;
   if (itemsProcessed === AnnotaionObj.length) {
     pdfWriter.end();

   }


});`

aathirag · 2018-05-18T18:03:32Z

In the above code, you are always modifying the source path. Which does not contain any annotation.
So

var pdfWriter = hummus.createWriterToModify(sourcePath, {
      modifiedFilePath: resultPath,
      log: logFilePath
  });
 pdfWriter.end();

AnnotaionObj.forEach(element => 
{
  var pdfWriter = hummus.createWriterToModify(resultPath);
   var pageNumber = element.pageNumber - 1;
   pageNumber = parseInt(pageNumber);
   console.log(pageNumber + " pageNumber");
   var pageModifier = new hummus.PDFPageModifier(pdfWriter, pageNumber, true);
   var cxt = pageModifier.startContext().getContext();

   if (element.ImageUrl != "" && element.ImageUrl != undefined) {

     //getting file name 
     let filenameary = element.ImageUrl.split('/');
     let path = "./downloads/" + filenameary[3];
     cxt.drawImage(element.x, element.y, path, {
         transformation: {
             width: 100,
             height: 40,
             proportional: false
         }
     });
   
   }
   pageModifier.endContext().writePage();

   itemsProcessed++;
   if (itemsProcessed === AnnotaionObj.length) {
     pdfWriter.end();

   }


});`

edsontrick · 2018-08-16T12:34:54Z

@aathirag have you got it ?

junaidlodhi7 · 2018-12-17T04:47:40Z

Hi @fdbatista thank you, I did it using same rule, only difference i have not use tcpdf or fpdi, I build my own custom code written in node, Please find the URL, draw some annotation and press on download button.

https://pdf-annotate.herokuapp.com/

I will also look to try for fpdi and tcpdf in my free time, Thanks

hi Can you please make a public repo of this project so I can also use it???

Vishnupriya112 · 2018-12-20T08:32:23Z

@rmemon I can able to download the pdf with annotation. But In Adobe reader am getting error

rmemon closed this as completed May 13, 2018

How to Download annotate PDF ? #40

How to Download annotate PDF ? #40

Comments

rmemon commented Jul 21, 2017 • edited Loading

KaneMorgan commented Jul 21, 2017

fdbatista commented Sep 1, 2017

rmemon commented Sep 3, 2017

ghost commented Oct 6, 2017

RameshSenagasetti commented Oct 12, 2017

ajile-in commented Oct 25, 2017

Mariachi1231 commented Oct 25, 2017 • edited Loading

gaganmurghai commented Apr 4, 2018

fdbatista commented Apr 4, 2018

fdbatista commented Apr 4, 2018

I already did. Here you instantiate the FPDI object and insert comments loaded from a database via an api request. In my case, I use PHP for building the RESTful API. This depends on your own business logic.

gaganmurghai commented Apr 4, 2018 • edited Loading

gaganmurghai commented Apr 4, 2018

fdbatista commented Apr 4, 2018

gaganmurghai commented Apr 4, 2018

gaganmurghai commented Apr 18, 2018

rmemon commented Apr 18, 2018 • edited Loading

gaganmurghai commented Apr 19, 2018

Vishnupriya112 commented Apr 20, 2018

gaganmurghai commented Apr 20, 2018 • edited Loading

rmemon commented Apr 21, 2018 • edited Loading

BharatDevda commented May 2, 2018

aathirag commented May 11, 2018

gaganmurghai commented May 12, 2018 • edited Loading

rmemon commented May 13, 2018

gaganmurghai commented May 14, 2018

gaganmurghai commented May 15, 2018

rmemon commented May 15, 2018

gaganmurghai commented May 16, 2018 • edited Loading

aathirag commented May 16, 2018 • edited Loading

rmemon commented May 16, 2018

gaganmurghai commented May 16, 2018 • edited Loading

aathirag commented May 18, 2018 • edited Loading

edsontrick commented Aug 16, 2018

junaidlodhi7 commented Dec 17, 2018

Vishnupriya112 commented Dec 20, 2018

rmemon commented Jul 21, 2017 •

edited

Loading

Mariachi1231 commented Oct 25, 2017 •

edited

Loading

I already did.
Here you instantiate the FPDI object and insert comments loaded from a database via an api request.
In my case, I use PHP for building the RESTful API. This depends on your own business logic.

gaganmurghai commented Apr 4, 2018 •

edited

Loading

rmemon commented Apr 18, 2018 •

edited

Loading

gaganmurghai commented Apr 20, 2018 •

edited

Loading

rmemon commented Apr 21, 2018 •

edited

Loading

gaganmurghai commented May 12, 2018 •

edited

Loading

gaganmurghai commented May 16, 2018 •

edited

Loading

aathirag commented May 16, 2018 •

edited

Loading

gaganmurghai commented May 16, 2018 •

edited

Loading

aathirag commented May 18, 2018 •

edited

Loading