Unable to see my document because of fullAPI

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.2.0

Detailed description of issue
Working with VueJs, I am not able to sign my document via my projects, the folowing error is shown : Full version of PDFNetJS has not been loaded. Please pass the “fullAPI: true” option in your WebViewer constructor to use the PDFNet APIs.

Expected behaviour
I should see my document and have the rights to sign it.

Does your issue happen with every document, or just one?
Every

Link to document
I do not have link

Code snippet

<template>
  <div ref="viewer" class="_pdfWebViewer"></div>
</template>

<script lang="ts">
//#region -> IMPORTS ///////////////////////////////////////////////////////////////////
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
import WebViewer from '@pdftron/pdfjs-express';
import configManager from "~/@managers/configManager";
import  $ from 'jquery';
//#endregion

@Component({
    components :{
    }
})
export default class PdfWebViewer extends Vue {  

    $refs! : {
      viewer : HTMLDivElement,
      docIframe : HTMLIFrameElement
    }

    private async mounted() {
      
      const options = { 
        path: `/lib`,
        licenseKey : configManager.getConfig('pdfLicenseKey'),
        disabledElements: this.getElementsToDisable(),
        //isReadOnly : true
      };

      WebViewer(options, this.$refs.viewer).then((instance) => {
        
        instance.UI.disableFeatures([
          instance.Feature.Measurement, 
          instance.Feature.Ribbons, 
          instance.Feature.Annotations, 
          instance.Feature.Download, 
          instance.Feature.FilePicker, 
          instance.Feature.LocalStorage, 
          instance.Feature.NotesPanel, 
          instance.Feature.Print, 
          instance.Feature.Redaction, 
          instance.Feature.TextSelection, 
          instance.Feature.Copy, 
          instance.Feature.MultipleViewerMerging, 
          instance.Feature.ThumbnailMerging, 
          instance.Feature.ThumbnailReordering, 
          instance.Feature.Search, 
          instance.Feature.MathSymbols, 
          instance.Feature.OutlineEditing, 
          instance.Feature.NotesPanelVirtualizedList, 
          // instance.Feature.PageNavigation, 
          // instance.Feature.MouseWheelZoom, 
          instance.Feature.TouchScrollLock, 
        ]);

        // activates the hand document manipulation (zoom and move)
        instance.docViewer.setToolMode(instance.docViewer.getTool('Pan'));

        this.instance = instance;

        this.emitInit(instance);
      });
    }

Hi @julien.beduneau

Thank you for reporting this. I see you’re on version 8.2, could you update to the latest version (8.7) and see if this issue still persists?

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.

Yes, I tried to update to v8.7.0 and the problem is still here.

UI version	'8.7.0'

Core version	'8.7.0'

webviewer.min.js	'8.7.0'

Build	'Ny8yMC8yMDIyfDJhMWM5ZWYwOA=='

WebViewer Server	false

Full API	false`

It seems that node version is a problem within my project, I have degraded to node 14 and it worked properly, but still, I should not have any problem with updating my dependencies and using pdfjs ?

So just to confirm you were using Node v16 and downgraded to v14 and there are no errors appearing?

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.

Yes, that’s it ! With Node 14 it worked

Hi
The issue come back.
Can you say me which version of Node.JS I have to use with last version of PDF Viewer JS?
Thanks by advance

Hello,
I need help, it is not possible to have a copy of the instance without PDFNet error message.
I don’t need PDFNet and I cannot use the component right now.
I have the last version 8.7.4 with node 16 with vue.js and I get an exception when calling
this.instance = instance; at the end of my code to get a copy of the object.

WebViewer(options, this.$refs.viewer).then((instance) => {

    instance.UI.disableFeatures([
      instance.Feature.Measurement, 
      instance.Feature.Ribbons, 
      instance.Feature.Annotations, 
      instance.Feature.Download, 
      instance.Feature.FilePicker, 
      instance.Feature.LocalStorage, 
      instance.Feature.NotesPanel, 
      instance.Feature.Print, 
      instance.Feature.Redaction, 
      instance.Feature.TextSelection, 
      instance.Feature.Copy, 
      instance.Feature.MultipleViewerMerging, 
      instance.Feature.ThumbnailMerging, 
      instance.Feature.ThumbnailReordering, 
      instance.Feature.Search, 
      instance.Feature.MathSymbols, 
      instance.Feature.OutlineEditing, 
      instance.Feature.NotesPanelVirtualizedList,
      // instance.Feature.PageNavigation, 
      // instance.Feature.MouseWheelZoom, 
      instance.Feature.TouchScrollLock, 
    ]);
    
    // activates the hand document manipulation (zoom and move)
    instance.docViewer.setToolMode(instance.docViewer.getTool('Pan'));

    this.instance = instance;

Please help me no way to find a. workaround

Hello Julien,

What error messaging are you receiving? Do you have any screenshots?
Node 16 should work with our latest version. Is the instance undefined? If so, you can retrieve it like so:
https://pdfjs.express/api/global.html#getInstance__anchor

Please provide a sample project if possible.

Thank you.

I try fo getInstance() but it doesn’t work
I always get this message and the document is not loading

The message when it try getInstance(); is

Uncaught (in promise) Error: More than one instance of WebViewer was found, and no element was passed into getInstance(). Please specify which instance you want to get.
at Function.w [as getInstance] (webviewer.min.js:1:27309)
at eval (pdfWebViewer.vue?./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use%5B1%5D!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options:122:98)

Hi Julien,

Based off that error message, it looks like you have multiple instances of WebViewer. You would need to pass the DOM element containing the instance of WebViewer you want to retrieve as an argument.

getInstance(document.getElementById('....'); // pass in the DOM element's Id

Best,
Darian

I try to get the Viewer with the solution you give me but I always get the same error on this call

    this.instance = WebViewer.getInstance(document.getElementById('documentToFilViewer'));

The error is:

Uncaught (in promise) Error: Full version of PDFNetJS has not been loaded. Please pass the “fullAPI: true” option in your WebViewer constructor to use the PDFNet APIs.
at Object.get (webviewer-core.min.js:2320:411)
at Proxy.toString ()
at isPlainObject (vue.runtime.esm.js:115:22)
at observe (vue.runtime.esm.js:938:28)
at defineReactive (vue.runtime.esm.js:962:31)
at Observer (vue.runtime.esm.js:912:17)
at observe (vue.runtime.esm.js:943:16)
at defineReactive (vue.runtime.esm.js:962:31)
at Observer (vue.runtime.esm.js:912:17)
at observe (vue.runtime.esm.js:943:16)

Hello Julien,

Could you provide a minimal sample project? The issue should still be reproducible and this will allow us to resolve the issue quicker. You can provide a download link or host it GitHub as well.

Thank you.