Pass a PDF blob to the PDF Viewer.. not a file

[raphael chancey]

Is there a way we can pass a PDF blob, base64 or otherwise, to the PDF viewer.... not all PDFs are online.

I have the base64 blob in hand.. just need to render.. an example would be great!

[raphael chancey]

I am trying this:

import { PdfViewerComponent, FormFields, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';

Report is a base 64 data blob of the PDF.. 

<PdfViewerComponent ref={(scope) => { this.viewer = scope; }} id="container" documentPath={report} >

<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields]} />

PdfViewerComponent>

nothing happens .. just shows loading and no errors

Also.. how can I set the width.. I am adding this to a mobile/responsive web page and did not see an example to change the width of the viewer? 

I tried to set the width:  style={{ 'width': '240px' }}

but the the pdf 'frame' stays super wide and the view is narrow.. it is not scaling down (still no pdf just talking about the frame) 

I have the report in hand as a buffer.. 

[Akshaya Arivoli]

Hi Raphael , 

Thank you for contacting Syncfusion support. 

We can load the PDF document as base64 string in our PDF Viewer during initialization using DocumentPath API. We can also set of the PDF Viewer using the Width API available in PDF Viewer. We can also created the sample for the same and shared in the below link, 

Sample link : https://stackblitz.com/edit/react-lqlxja-bjseyo  

Please try it and revert us with more details about your issue, exception/console error details, modified sample if you have any concerns. These details will be helpful for us to investigate further and assist you better.  

Regards, 

Akshaya. 

[raphael chancey]

Ok.. thank you. This did work but it has some deprecated function. 

Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

./node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/base/ajax-handler.js.AjaxHandler.sendRequest

./node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/base/ajax-handler.js.AjaxHandler.send	@	ajax-handler.js:41
	./node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/base/pdfviewer-base.js.PdfViewerBase.unloadDocument	@	pdfviewer-base.js:2164
	./node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/base/pdfviewer-base.js.PdfViewerBase.clear	@	pdfviewer-base.js:2115
	./node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/base/pdfviewer-base.js.PdfViewerBase.destroy	@	pdfviewer-base.js:2137
	./node_modules/@syncfusion/ej2-pdfviewer/src/pdfviewer/pdfviewer.js.PdfViewer.destroy	@	pdfviewer.js:1790
	./node_modules/@syncfusion/ej2-react-base/src/component-base.js.ComponentBase.componentWillUnmount	@	component-base.js:220
	callComponentWillUnmountWithTimer

I do have it showing the PDF and looks nice so seems just some logic in the clean up in the library is not working.

[Akshaya Arivoli]

Hi Raphael, 

Thank you for your update. 

We can reproduce the reported script error with the on refreshing the provided sample link. We have analyzed further and found that the latest chrome version has disabled the Synchronous XHR request which causes the reported error. Please find the below link for reference,  

   

https://www.chromestatus.com/feature/4664843055398912  

   

Also, we have raised the same in the chromium forum, we will track and update you with more details. Meanwhile, we will try to find any other alternative solution for resolving the issue. 

Regards, 

Akshaya 

[raphael chancey]

The other issue that is preventing us from using this library is the styles take over Material UI.. and it messes up our entire system. I can't seem to paste pictures in this content or I would send you some. Seems like some of the names being used for styles are the same as in core material UI.. I am guessing here.

Once the Chrome error is fixed I will try it again and paste some pictures.

Please test in Safari also..

[Akshaya Arivoli]

Hi Raphael, 

Thank you for your update. 

We are unable to reproduce the material related issue with the sample which we have provided earlier. Can you please share us the modified sample in which the issue could be reproduced. 

Also we have support for built in themes for our PDF Viewer control using that we can change the themes. Please find the below sample with fabric theme. 

https://stackblitz.com/edit/react-lqlxja-vao7qj?file=index.html  

Please refer to the know more about built- in themes. 

https://ej2.syncfusion.com/react/documentation/appearance/theme/  

As mentioned earlier, we will track the issue reported in forum and update you with more details. 

Regards, 

Akshaya