Skip to main content
Participant
March 5, 2021
Answered

Why Annotation tools not appearing on my PDF?

  • March 5, 2021
  • 1 reply
  • 1450 views

Hi,

I am using an iframe to render PDF in div tag as per the documentation. I have included my registered client id for my pdf embed api. I have also included embed mode as Inline and showAnnotationTools: true. Still I do not see Annotation tools appearing on PDF viewer. Below is the code I am using-

 

<div id="adobe-dc-view" style="width: 800px; box-shadow: 1px 1px 10px 1px #dadada;"></div>
<script type="text/javascript" src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
  <script type="text/javascript">
	  /* The PDF embed mode option here */
	  const viewerConfig = {
		  embedMode: "IN_LINE",
		  showLeftHandPanel: true,
		  showAnnotationTools: true,
		  showDownloadPDF: true, 
		  showPrintPDF: true,
		  showPageControls: true
	  };

	  document.addEventListener("adobe_dc_view_sdk.ready", function () {
		  /* Initialize the AdobeDC View object */
		  var adobeDCView = new AdobeDC.View({
			  /* Registered client id */
			  clientId: "<my client id>",
			  /* The div id in which PDF should be rendered */
			  divId: "adobe-dc-view",
		  });

		  /* Invoke the file preview API on Adobe DC View object */
		  adobeDCView.previewFile({
			  /* Pass information on how to access the file */
			  content: {
				  /* Location of file where it is hosted */
				  location: {
					  url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
				  },
			  },
			  /* Pass meta data of file */
			  metaData: {
				  /* file name */
				  fileName: "Bodea Brochure.pdf"
			  }
		  }, viewerConfig);

		  /* Define Save API Handler */
		  var saveApiHandler = function (metaData, content, options) {
			  console.log(metaData, content, options);
			  return new Promise(function (resolve, reject) {
				  /* Dummy implementation of Save API, replace with your business logic */
				  setTimeout(function () {
					  var response = {
						  code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
						  data: {
							  metaData: Object.assign(metaData, { updatedAt: new Date().getTime() })
						  },
					  };
					  resolve(response);
				  }, 2000);
			  });
		  };

		  adobeDCView.registerCallback(
			  AdobeDC.View.Enum.CallbackType.SAVE_API,
			  saveApiHandler,
			  {}
		  );
	  });
  </script>

 

Any suggestions what I am missing here?

 

This topic has been closed for replies.
Correct answer Joel Geraci

The IN_LINE mode does not support the annotation tools. You'll need to use FULL_WINDOW.

1 reply

Joel Geraci
Community Expert
Joel GeraciCommunity ExpertCorrect answer
Community Expert
March 5, 2021

The IN_LINE mode does not support the annotation tools. You'll need to use FULL_WINDOW.

Participant
March 8, 2021

Thanks @Joel Geraci ,

Although, not sure if I missed that in documentation anywhere. However, for some reason it is not showing in full screen vertically. See below image. Any idea?

Krunal
Joel Geraci
Community Expert
Community Expert
March 8, 2021

I don't think it is documented anywhere. However, If you go to the playground, and tap "customize" you can look at the settings for each of the display modes and see which UI customizations are enabled for that mode and which are not.

I think the issue you have above is that the height of your view element isn't set.