PDF breaks when upgrading from. 32.2.9 to 33.1.44

[carlos mendez]

HI i was using PDF viewer version  32.2.9 (standalone). and upgraded to 33.1.44 and when i try to render the PDF. (base 64) all i get its no render and at the bottom of the PDF viewer i get the text

The web service is not listening. The PDF viewer depends on the web service for all its functions. Please start the web service to continue.  so for the code i have 

<ejs-pdfviewer

:key="pdfViewerKey"

class="ao_sf_pdfviewer"

id="pdfViewer"

ref="pdfviewer"

height="100%"

width="100%"

locale="es"

:resourceUrl="myResourceUrl"

:documentPath="documentPath"

:enableServerBasedProcessing="false"

:downloadFileName="downloadFileNameDoc"

:enableHyperlink="false"

:enableAnnotation="false"

:enableFormFields="false"

:enableFormDesigner="false"

:enableBookmark="false"

:enablePageOrganizer="false"

:enableAttachment="false"

:toolbarSettings="sfPDF_toolbarSettings"

:pageOrganizerSettings="{ canInsert: false, canRotate: false }"

:zoomValue="100"

@toolbarClick="sf_PDFView_ToolbarClick"

@resourcesLoaded="sf_onResourcesLoaded"

>

</ejs-pdfviewer>

sf_onResourcesLoaded() {

console.log('$$$$$$ prueba de PDF')

// Choose ONE of the following load options:

// 1) Load by URL

// this.$refs.pdfviewer?.load(this.documentPath, '');

// 2) Load by Base64 (uncomment if you want to load Base64)

// const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiXi48...';

// if (base64) {

// this.$refs.viewer?.load(base64, '');

// }

},

Initially the DocumentPath is empty (was no problem)  and the code for load the doc is. 

const base64DataUri = `data:${dataPDF.mime};base64,${dataPDF.base64}`;

setTimeout( () => {

var viewer = this.$refs.pdfviewer.ej2Instances;

console.log(dataPDF.base64.substring(0, 30));

console.log(base64DataUri)

if (viewer) {

viewer.load(base64DataUri, null); // viewer.load( 'data:application/pdf;base64', dataPDF.base64, null );

}

}, 1000)

so version 32.2.9. working fine but new one not, also tried to solve this with help of chatgpt or grok and both insisted i have to set the property on the component 

:enableServerBasedProcessing="false"

 

also if i dont set the event sf_onResourcesLoaded , those are never loaded  and also the component send other errors 

is there anything has to be changed on new version or its a bug ? 

[Venkada Subramanian Durai]

Hi carlos mendez,

Thank you for the update. We would like to clarify that the Syncfusion Vue PDF Viewer does not provide the enableServerBasedProcessing API.
 

To help us identify the cause of the “Web services is not listening” issue on your side, could you please share the value you have set for resourceUrl when initializing the PDF Viewer?
 

Additionally, we recommend loading the PDF document inside the resourcesLoaded event of the PDF Viewer. This event is triggered after all required resources for the viewer are loaded, and before the PDF document is processed.
 

If the issue still persists after following this approach, please share:

• The PDF document you are testing with
• A modified version of your sample project where the issue can be reproduced
   

This will help us analyze the problem accurately and provide the correct solution for the challenge you are facing with the Vue PDF Viewer.

Sample we have tested

UG for when to load the PDF document in PDF Viewer

Regards,
Venkada Subramanian D

[Price Lincoln]

Hi Carlos,

Thanks for your update. We’d like to clarify that the Syncfusion Vue PDF Viewer does not support the enableServerBasedProcessing API.

To better understand the “Web services is not listening” issue you’re encountering, could you please share the resourceUrl value used when initializing the PDF Viewer on your side?

We also recommend loading the PDF document within the resourcesLoaded event. This ensures that all required viewer resources are fully loaded before the document is processed.

If the issue still persists after trying this approach, kindly provide the following details:

• The PDF document you are using for testing
• A sample or modified project that reproduces the issue

This will help us investigate the problem more effectively and assist you with an accurate solution.

Looking forward to your response.

Best regards,
run 3

[carlos mendez]

HI, i have been doing more tests in a sample proyect (quasar 2 + vue3 , with vite and postcss, node 22  )  and  making combinations 

created one page in composition api and other in options api 

used version 32x  initially  with 

• using CSS  from  node modules as import 
• using CSS from theme studio (generated theme)   created months ago

then upgrading  to 33x (latest versions)

• using CSS  from  node modules as import  
• using CSS from theme studio (generated theme)   created a few days ago 


using SCSS  i never could make it work 
and so far the issue appears if i use CSS  in wrong way cause version 32x and 33x happened the same.

Once i confirmed that css was loaded at 100% then the pdf viewer  worked fine  ! 
when i have the cases it does not work it appear on DEVtools errors that spinner el was undefined   (had to debug step by step in pdf code 

the CSS i tested was: material and material3 themes but had more issues using theme studio generate ones rather than the css imported directly from libraries , however i need to customize colors which i can only on material3 but not on material  so thats why i use to create themes on themestudio. by the way could be nice to have a dynamic way to override colors on materia as material 3. 

but still doing more tests and checking possible combinations of versions or CSS  just to be sure and check the right cause, 

[Jeeva Selvarasu]

Hi carlos mendez,

 

We suspect that your concern is regarding CSS variable customization for the Material theme, similar to the Material 3 theme. We would like to inform you that CSS variable customization is not available for the Material theme. We recommend using the Material 3 theme for CSS variable customization.

 

To customize the Material theme, kindly use the Theme Studio–generated styles in the application. 

 

If we have misunderstood your requirement, please share more detailed information to help us better understand your needs.

Regards,

Jeeva S