PDF Embed API & Vue 3

[Déménageur263548167xs5]

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.

[Raymond Camden]

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]

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]

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

[Déménageur263548167xs5]

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

I would have never find it without you. 

[Jason Sun embed]

Hi @Raymond Camden , I'm redirect to here from your blog Using the Adobe PDF Embed API with Vue 3 (raymondcamden.com).  I have similar question in VUE 3 and make it work following your awesome blog.

While in my request, I have scenario - the pdf viewer require to reload content when watcher notified.  the initial loading are all good, but when watcher notify pdf viewer to reload, it caused THE ERROR ---- '[mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: AppStore@65.isHidingBranding'

The basic code list here:

- register watcher to a variable which may changed from other component:

watch(
  () => reloadingRefView,
  (newValue) => {
    console.log("reloadingRefView watch - " + newValue);
    if (newValue.value.reloading === true) {
      loadPdfView();
      reloadingRefView.value.setReloading(false);
    }
  },
  { deep: true }
);

- method load pdf

function goPDFPreview() {
  if (!adobeApiReady.value) {
    return;
  }

  api
    .post("/File/DownloadPdf", {
      filePath: doc.value.filePath,
      mimeType: doc.value.mimeType,
      name: doc.value.name,
    })
    .then((resp) => {
      const data = resp.data; //pdf binary array
      const previewConfig = {
        defaultViewMode: "FIT_WIDTH",
        showAnnotationTools: true,
      };
         //reload content based on arrayBuffer
        adobeDCView.previewFile(
          {
            content: {
              promise: Promise.resolve(data),
            },
            metaData: { fileName: doc.value.name },
          },
          previewConfig
        );
      
    });
}

---------THE ERROR DETAIL

dc-mobx.js:2

Uncaught Error: [mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: AppStore@65.isHidingBranding
at nt (dc-mobx.js:2:68586)
at tt (dc-mobx.js:2:68540)
at Yt (dc-mobx.js:2:74710)
at t.prepareNewValue (dc-mobx.js:2:40871)
at Se (dc-mobx.js:2:60121)
at AppStore.set [as isHidingBranding] (dc-mobx.js:2:59510)
at AppStore.initialize (AdobeDCViewApp.js:2:367662)
at window.renderApp (AdobeDCViewApp.js:2:917564)
at _createClass._executeAction (ViewSDK.js:1:123089)
at _createClass._takeAction (ViewSDK.js:1:122057)