Viewer integration in HTML5/JS page with .NET Web Api

GroupDocs.Viewer Product Family
1

Dear all,


I am just evaluating GroupDocs viewer and obviously it is a great product.

Actually I would like to integrate it into an existing HTML5/Javascript client app which uses a .NET Web Api for data exchange. I have successfully added the GroupDocs Viewer components to the .NET Web Api, so calling the viewer.aspx directly from the API url works fine.

The challenge now is to embed the viewer HTML code returned from the Web API into my HTML/JS page. I tried with IFRAME but ran into different problems according to CORS (application website and WEB API reside on different target domains) and “action not supported” error messages from the viewer API.

Does anyone have a clue and/or already has successfully done such an integration?

Thanks you very much indeed for your support.

Best regards,

Denis

2

Hi Denis,


Thanks for taking interest in GroupDocs.Viewer for .NET.

We will require some more information to figure out your issue. Please provide us following details.

  • Are you getting issue on web API end or client app end?
  • Can you please share details of the error “action not supported”?
  • Does web API return the rendered HTML correctly?

Furthermore, please also mention the way you are calling the web API and which are the parameters you are passing to it. We shall be waiting for your reply.

Warm Regards
3

Dear usman,


Thanks a lot for your quick reply.
After investigating the issue a bit deeper it seems that the root cause is an improper auto-resizing of the inner part of the iframe. The error message mentioned obviously is obviously just due to the trial mode restrictions.

The result of the Web API is fine in full page mode, the viewer gets 100% displayed correctly with the same URL as shown below in the IFRAME tag.

Within my existing client application I tried to embed the groupdocs viewer with the following IFRAME:


In Google Chrome the content isn’t visible at all, in Edge browser at least the upper part of the viewer is shown (see attachment).

Is there any additional query code I have to call after page rendering the get the viewer resized properly? Are there any browser restrictions for the viewer to work within an iframe?

Thanks a lot for your support,

Denis

4

Hi Denis,


Thanks for sharing detailed information with us.

Can you please share the version of the GroupDocs.Viewer for .NET API you are using? This will help us to get more closer to your issue.

Thanks for your cooperation.

Warm Regards
5

I am using version 2.15.1.11034.

6

Hi,


Thank you for this information. Looks like the issue reason is in that fact that you doesn’t set the Viewer size properties and doesn’t set the viewer div size, please check that you have such options:
Screenshot by Lightshot and the same style options in the target div.

Best regards.

7
Thanks, Pavel.

I just noticed that you have a new viewer version 3.5 "New front end".
I have successfully integrated it in my solution by instructions on this page:

http://www.groupdocs.com/docs/display/viewernet/New+Front+End+Powered+by+GroupDocs.Viewer

Is there any possibility to add a toolbar with pager and printing function as it existed in the version before?

Thanks a lot for your valuable support,

Denis
8

Hi Denis,


Thanks for upgrading to version 3.5.0.

First of all, please note that next generation GroupDocs.Viewer for .NET starting version 3.0 is UI less back end document processing API. In contrast with earlier version, UI has been disintegrated from the API. Therefore, you can develop your own front end application according to your requirements.

We have also created sample open source document viewer applications in which toolbar (including pager and print option) has been implemented. Following are the applications along with their download links. You can download and modify these applications according to your requirements.

  • <a rel=“nofollow” href=“https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET/tree/master/Showcases/ASP.NET_MVC_Front_End” class=“js-navigation-open” id=“6d0d3335bcedeb4e3f17f068bf4059d5-98e9410199c6b1e032cdbdcaa694cee500d344e7” title=“ASP.NET_MVC_Front_End” style=“box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; font-size: 14px; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>ASP.NET_MVC_Front_End
  • <a rel=“nofollow” href=“https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET/tree/master/Showcases/ASP.NET_WebForm_Front_End” class=“js-navigation-open” id=“3b1c9237c5322dddadcbaffe9171d725-4afbe9c6154d0bc50f93628a5b4b694576cee4a3” title=“ASP.NET_WebForm_Front_End” style=“box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; font-size: 14px; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>ASP.NET_WebForm_Front_End

You can also test all the features exposed by next generation GroupDocs.Viewer API. To do this, you can download <a rel=“nofollow” href=“https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET/tree/master/Examples” class=“js-navigation-open” id=“ff7c0fcd6a31e735a61c001f75426961-c5501e33989cd1d6993be302b0dd9d3762ca25d8” title=“Examples” style=“box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; font-size: 14px; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>Examples project. For more details, see API Documentation.

In case of any confusion, please feel free to ask.

Warm Regards