• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

PDF Embed API & Vue 3

New Here ,
Sep 30, 2022 Sep 30, 2022

Copy link to clipboard

Copied

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.

Views

116

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 30, 2022 Sep 30, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 30, 2022 Sep 30, 2022

Copy link to clipboard

Copied

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:

RaymondCamden_0-1664561904751.png

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?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 30, 2022 Sep 30, 2022

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 03, 2022 Oct 03, 2022

Copy link to clipboard

Copied

LATEST

Thank you very much for the quick answer.
I've never used Object.freeze before.

I would have never find it without you. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources