Skip to main content
D
Déménageur263548167xs5
Participant
September 30, 2022
Question

PDF Embed API & Vue 3

  • September 30, 2022
  • 1 reply
  • 4283 views

Hello everyone !

 

I try to use your PDF Embed API and Vue 3.
I have this errors: Uncaught DOMException: Failed to execute 'postMessage' on 'Window': [object Array] could not be cloned.

 

You can reproduce the error using this sandbox: https://codesandbox.io/s/adobe-vue-embed-api-5j9ewi

 

My API Key work fine because I've tested it using a quick python server.

    This topic has been closed for replies.

    1 reply

    Raymond Camden
    Community Manager
    Raymond CamdenCommunity Manager
    Community Manager
    September 30, 2022

    Interesting. I've used PDF Embed w/ Vue before, but not in a 'full' app, in a Vue 2 single HTML page type thing. You did have a slightly older URL (I switched it to https://documentservices.adobe.com/view-sdk/viewer.js). I also added a specific width/height to the div which I think is required (and a color to ensure I didn't screw up), but it didn't help. Here's mine:

     

    https://codesandbox.io/s/adobe-vue-embed-api-forked-jrf27u

     

    Going to keep looking.

    Raymond Camden
    Community Manager
    Raymond CamdenCommunity Manager
    Community Manager
    September 30, 2022

    Ok, I found something interesting. Keep in mind I was pretty good at Vue 2, so so at Vue 3. On a whim, I changed this.adobeDCView to window.adobeDCView. Ie, make a global object out of it. 

    Everything worked.

     

    I then tested this:

          if (val) {
        // val == true ; Adobe is loaded on page
        this.adobeDCView = new window.AdobeDC.View({
          clientId: "d81f38de2653464ab73c0fcf9c3e5674",
          divId: "adobe-dc-view",
        });
        window.ray = new window.AdobeDC.View({
          clientId: "d81f38de2653464ab73c0fcf9c3e5674",
          divId: "adobe-dc-view",
        });
      }

    I then console.log'ed both obs when trying to preview:

    Ignore the first "Ray", it was just me putting a msg before logging this.adobeDCView. Anyway, note how it's a Proxy ob, which I assume Vue is doing for reactivity, and I believe that's breaking our code. Maybe this changed between Vue 2 and 3. I know in 2 it had reactive values, but it seemed to work fine. 

     

    Anyway, instead of window.ray of course, you could consider a non-reactive variable for the view object?

     

    Raymond Camden
    Community Manager
    Raymond CamdenCommunity Manager
    Community Manager
    September 30, 2022

    I believe I have a nicer solution - using Object.freeze. It works now, EXCEPT that it complains about client id, but it's tellin you the right domain to use, so, here ya go:

     

    https://codesandbox.io/s/adobe-vue-embed-api-forked-l1quyk?file=/src/App.vue

     

    Based on this tip: https://stackoverflow.com/questions/52843873/how-to-make-a-template-variable-non-reactive-in-vue

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices