Blob with markup

Technical Support
1

Hello

I used code where i want to store blob file with mark up annotation server.

$(’#document-approvel-form-by-owner’).submit(async (e) =>{

			e.preventDefault();

			//alert('yes');
			
			const doc = docViewer.getDocument();
			const xfdfString = await annotManager.exportAnnotations();
			const options = { xfdfString };
			const data = await doc.getFileData(options);
			const arr = new Uint8Array(data);
			const blob = new Blob([arr], { type: 'application/pdf' });
			var fd = new FormData(document.querySelector('form#document-approvel-form-by-owner'));
			//alert(blob);
			//var html = "<input type='hidden' name='fname' value='test.pdf'><input type='hidden' name='data' value='"+blob+"'>";
			//$('#blob_div').html(html);
			fd.append('fname', 'test.pdf');
			fd.append('datablob', blob);
			fd.append('button', buttonpressed);
			fd.append('action', 'owner_action_ajax');
			$.ajax({
				type: 'POST',
				url: ajax_object.ajax_url,
				data: fd,
				processData: false,
				contentType: false,
				beforeSend: function() {
					jQuery("#overlay").show();
				 },
				 error: function(data) {
					 jQuery("#overlay").hide();
					 console.log(data);
					 notify('Error occured','danger');
					 
				 }
			}).done(function(data) {
				jQuery("#overlay").hide();
				//console.log(data);
			   if (true == data.statuscheck) {
				//redirect to redirection url provided
				//window.location = data.uri;
				}else {
				console.log(data);
				window.location = data.uri;
				
				}
			});
		});

But blob is posted without annotations

2

Hey there!

Unfortunately PDF.js Express does not support merging annotations directly into the PDF yet. The document and XFDF would have to be saved separately, and then when the user re-opens the document, you would have to import the XFDF using the importAnnotations API.

However, we will be releasing a REST API service very shortly that can merge the XFDF directly into the PDF. When it is released, we will post an announcement in the Announcements category.

Thanks,
Logan

3

How to save it. Separately. I am using webviewer and on submiting form. Blob is posted but not with the markups i have done on pdf with markup. Can u share me code to save blob using pdf js express

4

Hello,

Your code for saving the blob looks correct to me. One thing you can remove is converting the data to a UInt8Array:

const doc = docViewer.getDocument();
const xfdfString = await annotManager.exportAnnotations();
const data = await doc.getFileData({});
const blob = new Blob([data], { type: 'application/pdf' });
const fd = new FormData();

fd.append('file', blob);
fd.append('xfdf', xfdf);

$.ajax({
  type: "POST",
  url: ajax_object.ajax_url,
  data: fd
})

The data will be posted with content type multipart/form-data, and the file property will be posted as binary data, so you will have to handle that on your server.

Thanks,
Logan

5

Did not get this remove is converting the data to a UInt8Array:

6

Can you provide me code with changes, I will thankful to you.

7

Hi,

In your code sample you originally sent, you have the following code:

const data = await doc.getFileData(options);
const arr = new Uint8Array(data);
const blob = new Blob([arr], { type: 'application/pdf' });

You do not need the line of code that creates a new Uint8Array.

So instead, the code can look like this:

const data = await doc.getFileData(options);
const blob = new Blob([data], { type: 'application/pdf' });

Hope this helps!

8

Its not working. i am sending blob at time of button pressed. its not working. I am check your code as mentioned on website.https://pdfjs.express/documentation/basic-operations/save-document/blob.

pls help me.

9

if we send xpdf string separately then how can i merge these into pdf.
I want to do it without api.

10

Hi,

PDF.js Express cannot save the XFDF into the PDF without using the API.

If you need this functionality client side, you can try out our sister product, PDFTron Webviewer. It has this functionality natively, pure client side.

11

I read your topic. About merging annotation in file. It uses API… and if I want to purchase pdftron how much I need to pay.

12

A PDFTron license starts at $4500 USD a year. You can contact sales for more information.

PDF.js Express costs $375 USD a month, but you would have to use the API in order to merge annotations.

13

Can i test api to merge document with anotations

14

Right now you need an active PDF.js Express license to use the API. We may change this in the future though to allow testing without an active license.

15

But it is asking for 1450 $

16

would it cost if i hit less than 500 hit of api.

17

A PDF.js Express license is $4500 a year. The API is priced separately as stated here.

If you use less than 500 calls to the API, then yes it is free.

18

Will it deduct any amount if i want to purchased any licence after adding details of card. And then hit api to merge less than 500

19

Hi,

I am a little confused by your question.

There are 2 services in play here. PDF.js Express Webviewer (which you have been trialing), and the PDF.js Express REST API.

To use PDF.js Express Webviewer in production, you must purchase a license which costs $4500 a year. This is non refundable.

After you purchase a PDF.js Express WebViewer license, you may sign up for the API. The API will charge you credit card every month based on usage. So if every month you use under 500 api calls, your credit card will never be charged.

20

if i want to use api only for testing now. not in production mode