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

PDF Embed API & Vue 3

  • September 30, 2022
  • 1 reply
  • 4316 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?

     

    J
    Jason Sun embed
    Participant
    March 14, 2023

    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

     


    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)

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