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

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

3.0K

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.

Votes

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?

 

Votes

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

 

Votes

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

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

I would have never find it without you. 

Votes

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 ,
Mar 14, 2023 Mar 14, 2023

Copy link to clipboard

Copied

LATEST

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)

Votes

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