GithubHelp home page GithubHelp logo

adobe / pdf-embed-api-samples Goto Github PK

View Code? Open in Web Editor NEW
206.0 13.0 131.0 805 KB

Samples for Adobe Document Services PDF Embed API

Home Page: https://documentcloud.adobe.com/view-sdk-demo/index.html

License: MIT License

HTML 10.00% JavaScript 61.09% CSS 5.31% TypeScript 23.61%

pdf-embed-api-samples's Introduction

Getting started with the Adobe Acrobat Services PDF Embed API

The Adobe Acrobat Services PDF Embed API lets you display PDF files in your website and leverage its power to benefit your users.

Prerequisites

Before you can work with the PDF Embed API, you must register your application and get Client Id (API Key). Request Access to get your own Client Id.

Supported Platforms

  1. Windows - Chrome, Firefox, Edge Chromium
  2. Mac - Chrome, Firefox, Safari, Edge Chromium
  3. Android - Chrome
  4. iOS - Chrome, Safari

Running the samples

The following sub-sections describe how to run the samples.

PDF Preview

PDF viewer fills the entire browser window to provide full immersive view for users to read and act on documents. To see it in action, copy the files in the Full Window Embed Mode folder to your computer, and open index.html in a supported browser.

Sized Container Embed Mode

PDF viewer is embedded in the sized container in slideshow and landscape mode. To see it in action, copy the files in the Sized Container Embed Mode folder to your computer, and open index.html in a supported browser.

In-Line Embed Mode

PDF viewer is embedded in line within the context of the app / web page. To see it in action, copy the files in the In-Line Embed Mode folder to your computer, and open index.html in a supported browser.

Lightbox Embed Mode

PDF viewer is displayed on top of web page and fills the entire browser window to provide a focused view. Best suited for content websites, content portals and email. To see it in action, copy the files in the Lightbox Embed Mode folder to your computer, and open index.html in a supported browser.

Local PDF file Preview

This sample demonstrates how to render a local PDF file using the PDF Embed API. It will ask you to pick a PDF file from your computer to start the PDF file rendering using the PDF Embed API. To see it in action, copy the files in the More Samples/Work with Local File folder to your computer, and open index.html in a supported browser.

PDF Preview with Annotation tools

PDF viewer will render PDF file along with annotation tools enabled. To see it in action, copy the files in the More Samples/PDF Annotations folder to your computer, and open index.html in a supported browser.

Note that by default if a user saves the PDF file after adding comments, the file is downloaded locally. This sample shows how to change that behavior, in this case taking no action except adding a small delay.

PDF Preview with Annotation APIs

PDF viewer will render PDF file along with annotation tools and APIs enabled. These samples show how to use annotation APIs to add, import, export, update and delete annotations programmatically. To see it in action, copy More Samples/PDF Annotations APIs folder to your computer, and try it out in a supported browser.

PDF Preview with Events

This sample shows how to start receiving events from PDF viewer. To see it in action, copy the files in the More Samples/Capture PDF Embed API Events folder to your computer, and open index.html in a supported browser.

Handle Search Engine Indexing

These samples provide different implementations of how to enable indexing of PDF files displayed using PDF Embed API. To see it in action, copy More Samples/Handle Search Engine Indexing folder to your computer, and try it out in a supported browser.

Viewer APIs

PDF Embed API provides viewer APIs for customizing the user interface and user interactions with the PDF. These samples show how to use these APIs to perform UI customizations programmatically at run-time. To see it in action, copy the files in the More Samples/Viewer APIs folder to your computer, and try it out in a supported browser.

Linearized PDF file Preview

This sample demonstrates how to render a linearized PDF file using the PDF Embed API. To see it in action, copy the files in the More Samples/Linearization folder to your computer, and open index.html in a supported browser.

Save User Preferences

This sample demonstrates how certain user preferences (such as updated annotation colour, and coach mark after selecting any annotation tool) can be saved and remembered in the browser. To see it in action, copy the files in the More Samples/Save User Preferences folder to your computer, and open index.html in a supported browser.

Analytics

If a website is already integrated with analytics tools, such as, Adobe Analytics or Google Analytics, then PDF analytics can be collected in these tools. These samples demonstrate how website developers can collect PDF analytics generated from PDF Embed API in Adobe Analytics and Google Analytics. To see it in action, copy the files in the More Samples/Analytics folder to your computer, and try it out in a supported browser.

To know more about the setup steps, please check the documentation.

JavaScript Framework Samples

React Samples

These samples demonstrate how to integrate the PDF viewer in a React application. To see it in action, copy More Samples/React Samples folder to your computer, and follow the instructions in React Samples README.

Angular Samples

These samples demonstrate how to integrate the PDF viewer in an Angular application. To see it in action, copy More Samples/Angular Samples folder to your computer, and follow the instructions in Angular Samples README.

Documentation

For detailed documentation, please check https://www.adobe.com/go/dcviewsdk_docs.

Licensing

This project is licensed under the MIT License. See LICENSE for more information.

pdf-embed-api-samples's People

Contributors

abharora avatar ankur010592 avatar jasnoors avatar sughoshadobe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pdf-embed-api-samples's Issues

Error in console "Cannot read properties of undefined (reading 'color')"

Expected Behaviour

Updating FreeText type of annotation

Actual Behaviour

Disappearing FreeText annotation and got an error in console "Cannot read properties of undefined (reading 'color')"

Reproduce Scenario (including but not limited to)

Steps to Reproduce

  1. download source code
    $ git clone https://github.com/adobe/pdf-embed-api-samples.git

  2. open index.html
    $ cd pdf-embed-api-samples/More\ Samples/PDF\ Annotations\ APIs/CRUD\ APIs/
    $ google-chrome index.html

  3. Drag and drop FreeText or Change the color FreeText.
    Tested a "I added a text annotation!" from page 2

  4. Disappear FreeText and got an error in console "Cannot read properties of undefined (reading 'color')"

Platform and Version

viewSDKAppVersion: 2.31.1_3.1.1-ef137c6f

Sample Code that illustrates the problem

https://github.com/adobe/pdf-embed-api-samples/tree/master/More%20Samples/PDF%20Annotations%20APIs/CRUD%20APIs

Logs taken while reproducing problem

[
  {
    "level": "error",
    "message": "TypeError: Cannot read properties of undefined (reading 'color')\n    at FreeTextCommentView.initializeValues (https://documentservices.adobe.com/dc-comments-dropin/2.31.1_1.940.0/bootstrap.js:2:2417979)\n    at FreeTextCommentView.render (https://documentservices.adobe.com/dc-comments-dropin/2.31.1_1.940.0/bootstrap.js:2:2430391)\n    at Object.allowStateChanges (https://documentservices.adobe.com/dc-core/2.31.1/dc-mobx.js:16:53236)\n    at https://documentservices.adobe.com/dc-core/2.31.1/dc-mobx.js:1:10132\n    at Yt (https://documentservices.adobe.com/dc-core/2.31.1/dc-mobx.js:16:45501)\n    at e.track (https://documentservices.adobe.com/dc-core/2.31.1/dc-mobx.js:16:48113)\n    at FreeTextCommentView.l [as render] (https://documentservices.adobe.com/dc-core/2.31.1/dc-mobx.js:1:10063)\n    at gi (https://documentservices.adobe.com/dc-core/2.31.1/dc-core.js:2:71411)\n    at fi (https://documentservices.adobe.com/dc-core/2.31.1/dc-core.js:2:71206)\n    at uo (https://documentservices.adobe.com/dc-core/2.31.1/dc-core.js:2:107112) [object Object]",
    "sessionId": "c6cacf76-6e70-4267-b22d-4d1c3213a38c",
    "viewSDKAppVersion": "2.31.1_3.1.1-ef137c6f",
    "tenantId": "http://localhost:8000",
    "callingApp": "dc-view-sdk",
    "externalUserId": "http://localhost:8000/xxxxx/xxxxx/xxx/xxxxx/xxx/xxxxxx",
    "clientId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "client_timestamp": "2022-11-25T02:14:10.332Z",
    "context": "ErrorBoundary",
    "dropinId": "dc-comments",
    "adb.event.context.AcrobatJS.isModernViewer": true
  }
]

Search result callback doesn't get called.

The Adobe git hub examples : pdf-embed-api-samples/Viewer APIs/Search and Zoom APIs/index.js
If the search is done, it must call its callbacks. In this case, "searchCallback". However, this doesn't get called anymore.
It used to call, but at some point it doesn't. Can someone look at this problem?
Actual code looks like this

var search = function(searchTerm) {
  viewerApis.search(searchTerm)
    .then(function(sObj) {
       searchObject = sObj;
       searchObject.onResultsUpdate(searchCallback).     // ==> This callback doesn't get called.
       .then(function(result) {
       console.log("Registered callback function with onResultsUpdate(): ", result)   // ===> This is always false
       })
     .catch(function(error) {
       console.log(error)
   });
  })
.catch(function(error) {
  var errorMsg = "";
  if(error.code === "FAIL") {
  errorMsg = "No search result found";
  } else if(error.code === "INVALID_INPUT") {
      errorMsg = "Enter valid search term";
}
  document.getElementById("search-result").style.display = "block";
  document.getElementById("searchResult-num").innerText = errorMsg;
  document.getElementById("search-result").querySelectorAll(".searchResult-btn").forEach(function(element) {
  element.style.opacity = "0.2";
  element.disabled = true;
  });
})
}

//// CALLBACK. This used to called, but no longer gets called.
function searchCallback(searchResult) {
  var currentResultIndex = searchResult.currentResult.index;
  var totalResults = searchResult.totalResults;
  var searchResultItem = document.getElementById("search-result");
  searchResultItem.style.display = "block";
  document.getElementById("searchResult-num").innerText = "Result " + currentResultIndex + " of " + totalResults;
  searchResultItem.querySelectorAll(".searchResult-btn").forEach(function(element) {
    element.style.opacity = "0.8";
    element.disabled = false;
});
}

Expected Behaviour
It should make a callback call.

Actual Behaviour
It doesn't make callback.

Add JSON encoded form fields and values to "metadata" parameter on Save

It would be extremely useful to have the PDF form fields and values added as a JSON object to the metadata parameter when "Save" is clicked on the PDF. At present, the large size of some PDFs makes transmitting them to a server via javascript a substantial challenge. There are size issues, encoding issues, and then issues of actually pulling said form fields and values from the PDF once the BLOB reaches the server.

The use case of allowing consumers to use an actual PDF to enter form data on the internet instead of HTML forms without the document support (or some side-by-side amalgamation) would be incredibly well received.

Embed API - CSP issue with promise

I have been using the API and providing a URL and not having any problems but when I switch to using the promise I am getting an error back in the console and the file doesn't load. It looks as if the error is in the viewer.js

I get the error:

"Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' use.typekit.net assets.adobedtm.com www.adobe.com/marketingtech/ prod.adobeccstatic.com/utilnav/ widget.uservoice.com by2.uservoice.com/t2/ assets.adobe.com api.demandbase.com/api/v2/ip.json commerce.adobe.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present."

Is there something I need to add to my CSP Header to prevent this?

To reproduce the error here's what I am doing using I am using https://documentservices.adobe.com/view-sdk/viewer.js

var adobeDCView = new AdobeDC.View({
clientId: {clientId},
divId: "adobe-dc-view",
});

adobeDCView.previewFile({
content: {
promise: readFile(buffer),
},
metaData: {
fileName: "FileName"
}
}, {});
}

Any help would be greatly appreciated.

pdf embed inside a web component

I am trying to create a component and embed the pdf viewer inside it by passing the relevant pdf. However, all the examples using LINE_IN or SIZED_CONTAINER which seems appropriate to my use-case needs an element ID that is accessible from the main DOM. However, I would like it contained within my component viz. shadowDOM. Is there a way of specifying the DivId by a element instead of an Id? If so, I can pass the shadowDom element object to the AdobeDC class

Thanks

can i use this SDK print?

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

user should be restricted to modify (delete or edit) the comment of other users.- Adobe Embed PDF API

Expected Behaviour

user should be restricted to modify (delete or edit) the comment of other users.

Actual Behaviour

user can easily manipulate comments of other users.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

  1. Click on Add comments from the toolbar
  2. Add comment and logout the user
  3. Login by different user
  4. Logged In user can see edit and delete option for previously added comments from different user.

Platform and Version

adobe embed api February, 2023

Sample Code that illustrates the problem

Logs taken while reproducing problem

Can't copy text displayed by component

I have a pdf file in version 1.4 that cannot copy the content (text) of the file when it is opened by the component. I have already opened the file locally (Adobe Reader DC) and there it is possible to copy the content (text), I also opened the file in the browser (Chrome) and also allows copying the content of the file (text).
This pdf is generated by pdf sharp core ( https://github.com/ststeiger/PdfSharpCore ) v1.3.32.

Font size of input form does not auto scale

Expected Behaviour

Font size on each input in forms should be in auto. Image below is just default from Chrome browser.

image

Actual Behaviour

image

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Upload attached file to https://acrobatservices.adobe.com/view-sdk-demo/index.html#/customize/FULL_WINDOW to try.

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Sample_Editable_Consulting Invoice.pdf

PREVIEW_RENDERING_FAILED

Not sure this is the correct place, but as the Adobe forums are not responsive adding here.

We have a site where the Adobe Embed API has been working well for months, but in the last week started popping up with the error PREVIEW_RENDERING_FAILED, which fails to even show an error message, instead we get a completely blank screen, this is intermittent, sometimes it will show the PDF fine, other times it seems to timeout the promise.

The files are loaded from an API and using a fileReader we are creating an ArrayBuffer, which has not changed in any way, and the files sometimes load and then sometimes we receive a blank screen and the PREVIEW_RENDERING_FAILED error. The files are not large, max is currently around 2MB and the only way I can consistently show the error is if I 3G throttle the connection, just seems to time out even with small files, but it is intermittent even on a non throttled connection, it is as if the promise resolution even though the file has been received is timing out.

The error seems to be thrown in ViewSDKInterfaceApp.js on the line which gets the exposed APIs but that could just be the browser interpretation, its the last place on the stack trace, which shows:

previewFile(fileInfo, previewConfig) {
        this._logExternal("Starting process to preview file.", fileInfo.metaData, previewConfig);
        return this._embedModeHandlerService
            .initialiseAction(fileInfo, previewConfig, IFrameMessageTypes.PREVIEW, hostAppStartTime)
            .then(() => this._adobeViewer.getExposedAPIs({ previewConfig }));
    }

There are also some XHR requests going to https://dc-api.adobe.io/system/log which seem to have some additional information:

{
  "level": "error",
  "message": "Error in preview, file rendering timeout",
  "sessionId": "41188030-6b8f-47f9-9ab2-3b6dca66d104",
  "viewSDKAppVersion": "REDACTED",
  "tenantId": "REDACTED",
  "callingApp": "dc-view-sdk",
  "externalUserId": "REDACTED",,
  "clientId": "REDACTED",
  "client_timestamp": "2023-08-22T19:45:58.200Z",
  "context": "AppStore"
}

And

{
  "level": "error",
  "message": "File preview blocked as preview failed to load REDACTED",
  "sessionId": "REDACTED",
  "viewSDKAppVersion": "3.2.4_3.2.0-bab76ff9",
  "tenantId": "REDACTED",
  "callingApp": "dc-view-sdk",
  "externalUserId": "REDACTED",
  "clientId": "REDACTED",
  "client_timestamp": "2023-08-22T19:45:58.253Z",
  "context": "App"
}

Our code is pretty standard I think based on the official documentation when dealing with a non url file, in our case from an API endpoint. the code has been working for months, its just started to happen this with no changes to the way this has been working.

Our fetch code looks like:

const fetchPDF = (id: string, title: string, pages: number) => {
    fetch(`/api/pdf/${id}`)
      .then((response) => response.blob())
      .then((blob) => {
        const reader = new FileReader();

        reader.onloadend = (e) => {
          const filePromise = Promise.resolve(e.target?.result)
          previewPDF(filePromise, title, pages)
        }

        reader.readAsArrayBuffer(blob)
      })
}

previewPDF function:

const previewPDF = (filePromise: any, title: string, pages: number) => {
  const adobeDCView = new AdobeDC.View({
    clientId: config.adobeApiKey,
    divId: `adobe-dc-view-${props.id}`,
  })
  adobeDCView.previewFile(
    {
      content: {
        promise: filePromise,
      },
      metaData: { fileName: title },
    },
    {
      embedMode:
        props.mode.toLowerCase() === 'lightbox' ? 'LIGHT_BOX' : 'IN_LINE',
      exitPDFViewerType:
        props.mode.toLowerCase() === 'lightbox' ? 'CLOSE' : 'RETURN',
      showPrintPDF: true,
      defaultViewMode: pages > 1 ? 'FIT_PAGE' : 'FIT_WIDTH',
    }
  )
}

Measurement tool

Hello All
is there some documentation or example regarding Measurement tool?
I need to measure the distance between two (or more) points and measure the area.
Thanks.

Highlighted annotations content

Hi,

Not sure where else to ask this, but I've searched the API extensively, and so far it doesn't seem like we can get the contents of an annotation? For example, if I highlight a text block, I can't access the raw text highlighted through the annotation manager. I can only get access to the bounding rectangle.

Is there something planned in the future that will enable this behaviour?

Rotate Button Support

Is it possible to allow the rotation of PDFs via a button? And if not are there any plans to support the addition of a rotate PDF button?

Annotations duplicated on addAnnotationsInPDF function

Since latest release today 13th of March using the pdfEmbedAPI using addAnnotationsInPDF function results in the annotation added twice on any given PDF, issue happening on all browsers and accross operating systems (tested on Macos, Linux, Windows)

Every type of PDF is causing the issue and its consistent on both our application and the example repository provided by Adobe https://github.com/adobe/pdf-embed-api-samples

Expected Behaviour

Using addAnnotationsInPDF adds an annotation a single time

Screen Shot 2024-03-13 at 1 40 10 PM

Actual Behaviour

addAnnotationsInPDF is adding the annotation twice

Screen Shot 2024-03-13 at 1 40 23 PM

Reproduce Scenario (including but not limited to)

Original.pdf

Steps to Reproduce

Code to replicate:

  • Pull the latest release of the PDFEmbed api sample

  • On https://github.com/adobe/pdf-embed-api-samples/blob/master/More%20Samples/React%20Samples/src/sample... override this function to delete and all back all markers

    onFileUpload = event => {
    event.persist();
    this.viewSDKClient.ready().then(() => {
    const files = event.target.files;
    if (files.length > 0 && this.isValidPDF(files[0])) {
    const fileName = files[0].name;
    const reader = new FileReader();
    reader.onloadend = e => {
    const filePromise = Promise.resolve(e.target.result);
    /* Helper function to render the file using PDF Embed API. */
    viewSDKClient
    .previewFileUsingFilePromise(
    "pdf-div",
    filePromise,
    fileName,
    previewConfig
    )
    .then((adobeViewer) => {
    adobeViewer.getAnnotationManager().then((annotationManager) => {
    annotationManager
    .removeAnnotationsFromPDF()
    .then((result) => {
    annotationManager
    .addAnnotationsInPDF(result["annotations"])
    .then((result) => {
    console.log(result);
    })
    .catch((error) => console.log(error));
    })
    .catch((error) => console.log(error));
    });
    });
    };
    reader.readAsArrayBuffer(files[0]);
    }
    });
    }

  • Upload the provided PDF

  • Make a simple change to trigger download

  • Download new PDF with duplicated annotations

Platform and Version

Latest version all platforms and modern web browsers

Logs taken while reproducing problem

None observerd

Not able to View the EA forms document in PDF-emded viewer

Expected Behaviour

The uploaded document and pdf-emdeb viewer document should be same.

Actual Behaviour

pdf-emded viewer document is not matching with uploaded document

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Original Document Before uploading to pdf-emded viewer
Total number of pages is 38

maa_human_v1.19.0.2_Result.pdf

PDF Document after viewed in PDF-emdeb viewer and downloaded
Total no of pages is 28 pages

image

In Viewer content are getting overlap
image

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Switch to more inclusive language

Could you please take some time in the next few days to make changes to some terminology in your repos and content as much as is possible:

  • Whitelist/blacklist to Allowed List and Blocked List (or Approve List/Deny List - some software uses this instead) respectively. Google and many developers are formalizing allowlist and blocklist. You might want to lobby for those terms to be used in the UI.
  • Master/Slave to master and replica (or subordinate, if that makes more sense) respectively.

If you cannot remove the term because the writing for example reflects the UI or the code, please make a note and send me an email to [email protected] so we can bring it that team’s attention. Thanks for your efforts in this matter.

Set default font size and line weight through user settings (Annotations tools)

Expected Behaviour

  1. being able to set default size of lines and texts. (like color)
  2. size of texts and lines should be the last size used by user. (like color)
    i expect to be able to set default drawing tool weight and text comment font size through user setting. i can only set default colors of tools.
    beside that, when i draw a line and then change the color and weight of it, the next drawing will be the same color but not the same weight! (same for text comment)

Actual Behaviour

  1. not able to set default size of lines and texts.
  2. size of texts and lines is fixed and not related to last settings. (like color)

APP_RENDERING_FAILED not fired even though UI gives out error message

Expected Behaviour

APP_RENDERING_FAILED event is fired if viewer fails to load a file. (corrupted pdf files, renamed non pdf files to .pdf ext)

Actual Behaviour

Viewer gives an error on the UI but the event is not fired at all.

Reproduce Scenario (including but not limited to)

Attach a non-pdf file, or a non-pdf file that you renamed to a pdf.

Annotation Selector is not valid for given xxx

Expected Behaviour

For the given annotations to be added to a Document on preview file.

Actual Behaviour

Annotations are not being added intermittently. Sometimes they are added and sometimes it fails. It fails most of the times.

Reproduce Scenario (including but not limited to)

I've encountered this error when using:
annotationManager.addAnnotations(annotations);

Steps to Reproduce

Platform and Version

PDF Embed API

Sample Code that illustrates the problem

<script>
var document_data = [{
    "@context": [
      "https://www.w3.org/ns/anno.jsonld",
      "https://comments.acrobat.com/ns/anno.jsonld"
    ],
    "id": "408abbe1-7b68-8c17-19h1-5a7aba9c891",
    "type": "Annotation",
    "motivation": "commenting",
    "bodyValue": "Hi",
    "target": {
      "source": "6d07d124-ac85-43b3-a867-36930f502ac6",
      "selector": {
        "node": {
          "index": 0
        },
        "opacity": 0.4,
        "subtype": "note",
        "boundingBox": [
          578.1040491761639,
          825.4109275434271,
          595.711279100311,
          842.0399780273438
        ],
        "strokeColor": "#fccb00",
        "type": "AdobeAnnoSelector"
      }
    },
    "creator": {
      "id": "LMF-2",
      "name": "LMF-2",
      "type": "Person"
    },
    "created": "2022-09-27T13:11:27Z",
    "modified": "2022-09-27T13:11:27Z"
  },{
    "@context": [
      "https://www.w3.org/ns/anno.jsonld",
      "https://comments.acrobat.com/ns/anno.jsonld"
    ],
    "id": "8b9cb9db-e5a4-87ba-2ch7-6b18fabeba2",
    "type": "Annotation",
    "motivation": "commenting",
    "bodyValue": "Test",
    "target": {
      "source": "6d07d124-ac85-43b3-a867-36930f502ac6",
      "selector": {
        "node": {
          "index": 0
        },
        "opacity": 0.4,
        "subtype": "note",
        "boundingBox": [
          384.42452001054556,
          530.0007365938475,
          402.0317499346927,
          547.6079665179946
        ],
        "strokeColor": "#fccb00",
        "type": "AdobeAnnoSelector"
      }
    },
    "creator": {
      "id": "LMF-2",
      "name": "LMF-2",
      "type": "Person"
    },
    "created": "2022-09-27T13:12:04Z",
    "modified": "2022-09-27T13:12:04Z"
  },{
    "@context": [
      "https://www.w3.org/ns/anno.jsonld",
      "https://comments.acrobat.com/ns/anno.jsonld"
    ],
    "id": "0aa999a7-9f5e-841f-02h9-fa094884abd",
    "type": "Annotation",
    "motivation": "commenting",
    "bodyValue": "",
    "target": {
      "source": "6d07d124-ac85-43b3-a867-36930f502ac6",
      "selector": {
        "node": {
          "index": 0
        },
        "quadPoints": [
          168.85789087681306,
          485.1357995831707,
          314.6897057249698,
          485.1357995831707,
          168.85789087681306,
          476.5010210724246,
          314.6897057249698,
          476.5010210724246,
          313.7302858904425,
          485.1357995831707,
          565.0982825366074,
          485.1357995831707,
          313.7302858904425,
          476.5010210724246,
          565.0982825366074,
          476.5010210724246,
          28.78259503582041,
          476.5010210724246,
          235.05785945920002,
          476.5010210724246,
          28.78259503582041,
          468.82566239620576,
          235.05785945920002,
          468.82566239620576
        ],
        "opacity": 0.4,
        "subtype": "highlight",
        "boundingBox": [
          168.85789087681306,
          485.1357995831707,
          235.05785945920002,
          468.82566239620576
        ],
        "strokeColor": "#fccb00",
        "type": "AdobeAnnoSelector"
      }
    },
    "creator": {
      "id": "LMF-2",
      "name": "LMF-2",
      "type": "Person"
    },
    "created": "2022-09-27T13:17:16Z",
    "modified": "2022-09-27T13:17:16Z"
  },{
    "@context": [
      "https://www.w3.org/ns/anno.jsonld",
      "https://comments.acrobat.com/ns/anno.jsonld"
    ],
    "id": "5298b8d4-3e27-85a3-92hc-3949dbbe8be",
    "type": "Annotation",
    "motivation": "commenting",
    "bodyValue": "hi",
    "target": {
      "source": "6d07d124-ac85-43b3-a867-36930f502ac6",
      "selector": {
        "node": {
          "index": 0
        },
        "opacity": 0.4,
        "subtype": "note",
        "boundingBox": [
          578,
          825.0399780273438,
          595,
          842.0399780273438
        ],
        "strokeColor": "#fccb00",
        "type": "AdobeAnnoSelector"
      }
    },
    "creator": {
      "id": "LMF-2",
      "name": "LMF-2",
      "type": "Person"
    },
    "created": "2022-09-27T13:34:59Z",
    "modified": "2022-09-27T13:34:59Z"
  },];
          const annotations = document_data;
          
          /*
  Copyright 2020 Adobe
  All Rights Reserved.
  
  NOTICE: Adobe permits you to use, modify, and distribute this file in
  accordance with the terms of the Adobe license agreement accompanying
  it. If you have received this file from a source other than Adobe,
  then your use, modification, or distribution of it requires the prior
  written permission of Adobe.
  */
  
  var viewerConfig = {
      /* Enable commenting APIs */
      enableAnnotationAPIs: true,  /* Default value is false */
      embedMode: "FULL_WINDOW",
  };
  
  /* Wait for Adobe Document Services PDF Embed API to be ready */
  document.addEventListener("adobe_dc_view_sdk.ready", function () {
      
      const eventOptions = {
          listenOn: [
              "ANNOTATION_ADDED", "ANNOTATION_CLICKED",
              "ANNOTATION_UPDATED", "ANNOTATION_CLICKED",
              "ANNOTATION_DELETED", "ANNOTATION_CLICKED",
          ]
      }
                   
      const profile = {
         userProfile: {
             name: 'LMF-2',
         }
     };
      /* Initialize the AdobeDC View object */
      var adobeDCView = new AdobeDC.View({
          /* Pass your registered client id */
          clientId: "xxxx",
          /* Pass the div id in which PDF should be rendered */
          divId: "adobe-dc-view",
      });
  
      /* Invoke the file preview API on Adobe DC View object and return the Promise object */
      var previewFilePromise = adobeDCView.previewFile({
          /* Pass information on how to access the file */
          content: {
              /* Location of file where it is hosted */
              location: {
                  url: "https://some.domain.com/public/somefile.pdf",
                  /*
                  If the file URL requires some additional headers, then it can be passed as follows:-
                  header: [
                      {
                          key: "<HEADER_KEY>",
                          value: "<HEADER_VALUE>",
                      }
                  ]
                  */
              },
          },
          /* Pass meta data of file */
          metaData: {
              /* file name */
              fileName: "somefile.pdf",
              /* file ID */
              id: "6d07d124-ac85-43b3-a867-36930f502ac6"
          }
      }, viewerConfig);
      
      adobeDCView.registerCallback(
          AdobeDC.View.Enum.CallbackType.GET_USER_PROFILE_API,
          function() {
             return new Promise((resolve, reject) => {
                resolve({
                   code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                   data: profile
                });
             });
          },
      {});
      
  
      /* Use the annotation manager interface to invoke the commenting APIs*/
      previewFilePromise.then(function (adobeViewer) {
          
          adobeViewer.getAnnotationManager().then(function (annotationManager) {
              annotationManager.registerEventListener(
              function(event) {
                  var status = true;
                  for (let i = 0; i < annotations.length; i++) {
                    if(annotations[i].id == event.data.id){
                        status = false;
                    }
                  }
                  if(event.type == "ANNOTATION_DELETED" || event.type == "ANNOTATION_UPDATED"){
  
                      status = true;
                  }
                  // "ANNOTATION_UPDATED", "ANNOTATION_CLICKED",
                  if(status) {
                      console.log(event);
                      console.log('qawsed');
                      var workflow_id = $('.workflow_id').val();
                      var document_data  = JSON.stringify(event.data, null, 2);
                      // var document_data  = event.data;
                      $.ajax({
                          url         : base_url+'/correspondence/pdf-comment-save',
                          type        : "post",
                          data: {
                              '_token'        : csrf_token,
                              'data'          : document_data,
                              'type'          : event.type,
                              'workflow_id'   : workflow_id
                          },
                          success     : function(data){
                              var response =  $.parseJSON(data);
                              if(response.status == true) {
                                  showMessage('success',response.message);
                              } else {
                                  showMessage('error',response.message);
                              } 
                          }
                      });
                  }
                  
              },
                  eventOptions
              );
              /* API to add annotations */
              annotationManager.addAnnotations(annotations)
                  .then(function () {
                      console.log("Annotations added through API successfully")
                  })
                  .catch(function (error) {
                      console.log(error)
                      // console.log('1');
                  });
  
              /* API to get all annotations */
              annotationManager.getAnnotations()
                  .then(function (result) {
                      console.log("GET all annotations", result)
                  })
                  .catch(function (error) {
                      console.log(error)
                      // console.log('2');
                  });
  
              /* API to delete annotations based on annotation ID filter */
              var filter = {
                  annotationIds: ["3adeae16-a868-4653-960e-613c048dddc5", "079d66a4-5ec2-4703-ae9d-30ccbb1aa84c"]
              };
              annotationManager.deleteAnnotations(filter)
                  .then(function () {
                      console.log("Deleted annotations based on annotation ID filter.")
                  })
                  .catch(function (error) {
                      console.log(error)
                      // console.log('3');
                  });
  
              /* API to delete annotations based on page range filter */
              filter = {
                  pageRange: {
                      startPage: 4,
                      endPage: 6
                  }
              };
              annotationManager.deleteAnnotations(filter)
                  .then(function () {
                      console.log("Deleted annotations based on page range filter")
                  })
                  .catch(function (error) {
                      console.log(error)
                      // console.log('4');
                  });
  
              /* API to get annotations after deletion */
              annotationManager.getAnnotations()
                  .then(function (result) {
                      console.log("GET annotations result after deleting annotations", result)
                  })
                  .catch(function (error) {
                      console.log(error)
                      // console.log('5');
                  });
          });
      });
  });
  </script>

Logs taken while reproducing problem

Unable to view on chrome print and download pdf using iPhone/iPad

Unable to view the print and download buttons on Chrome using iPhone/iPad.

<!-- /.panel-heading -->
<div class="panel-body">
   <div id="renderPDF">
       <div id="adobe-dc-view" style="width: 100%;"></div>
       <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
   </div>
</div>
<!-- /.panel-body -->

<script type="text/javascript">
   document.addEventListener("adobe_dc_view_sdk.ready", function () {
       var adobeDCView = new AdobeDC.View({ clientId: "<CLIENT_ID>", divId: "adobe-dc-view" });
       
       adobeDCView.previewFile({
           content: { location: { url: "example.pdf" } },
           metaData: { fileName: "example" }
       }, { embedMode: "IN_LINE", showDownloadPDF: true, showPrintPDF: true });
   });
</script>

print

Enforce refresh pdf file content in same iframe for multiple pdf files via <input> tag.

Expected Behaviour

Open 1st pdf file via , passing the file as URL (URL.createObjectURL()) to
this.AdobeDCView.previewFile({content: {location}, metaData: {fileName, id}}, viewerConfig);
It render correctly.

Open 2nd pdf file via <input, same steps as above; it eventually calls AdobeDCView.previewFile with a different URL, expected to see the new pdf file rendered.

Actual Behaviour

It's the 1st pdf rendered in iframe.

Is there a way to enforce refreshing the pdf files?

Cannot load api via jquery getScript()

Expected Behaviour

Use jquery getScript() to load the API at run time when needed, the script is loaded and the adobe_dc_view_sdk.ready event is fired.

Actual Behaviour

An unhandled javascript exception occurs: TypeError: Cannot read properties of undefined (reading 'src') at loadSDKScript

Sample Code that illustrates the problem

https://jsfiddle.net/redtopia/o3m689sg/6/ (view the console to see the exception)

The following fiddle fixes the issue by loading the script with vanilla javascript

https://jsfiddle.net/redtopia/Lyqdj2zm/6/

Checkbox groups check all boxes when editing

Any checkbox groups in a PDF select the entire group when one is clicked. Is this a problem with the design of the PDF, or an issue with the Full Window mode web viewer? Happens on mac with chromium based browser.

Grab PDF file from a VFS

Hi, sorry my english is not perfect, not a web developper, only searching a solution to fix an iOS13+ browser change in behaviour regarding PDF file.
Application is Filemaker Go on iPhone/iPad, so it will use the Safari browser to view web document.

Expected Behaviour

view the pdf file

Actual Behaviour

error, can't preview
File preview error, not available reload to try again

Reproduce Scenario (including but not limited to)

Use a source file hosted by a Virtual File Service like HFS from Rejetto https://rejetto.com/hfs/

Steps to Reproduce

Platform and Version

iOS14 Safari, Win10 Chrome

Sample Code that illustrates the problem

The demo code from https://www.adobe.io/document-services/apis/pdf-embed/

Logs taken while reproducing problem

The demo file works,
I got my API key, test the demo file on my website.
Test the demo code and my key with a PDF hosted on my website, all work

The only probleme is the .js is not waiting or asking properly
The log show a request for data, the web page indicate error and the VFS never send the file.
Spoke with the dev of HFS and it as to do with request/answer/expectation of the .js that is the cause.

That same URL enter in any web browser will download the file right away, so the VFS is not the issue.

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.