How to view Excel and PDF files in HTML page using angularJS in .net framework

GroupDocs.Viewer Product Family
1

Hi,

High level view of our requirement.
Want to display list of excel and PDF file names in left panel of web(html) page and on click of any file, want to view/preview/display selected file in right pane of web page. And (end user) client should be able to view excel or PDF file in browser without any need to install any PDF reader or Excel or any other software/utility.

Background of our Project: We have HTML pages using angular JS for any data (read/write) built in Visual Studio 2013 (.net framework) please note we don’t want to use any cshtml or aspx page.

Please suggest preferred approach to achieve same and share if there is any example or demo to achieve such kind of functionality in website using groupdocs ?

Thanks in advance
2

Hi vschib,


Thanks for taking interest in GroupDocs.Viewer API.

Yes, you can achieve you mentioned functionality using GroupDocs.Viewer for .NET API.

First of all, please note that GroupDocs.Viewer for .NET is a back end document processing API that supports rendering of supported document into html or images. These rendered html files/images can be loaded into any browser to view contents of the document.

In your case, you can achieve your desired functionality by making calls from Angular JS to C#/VB methods which will render the document into html or images, and then send the rendered documents (html content or images) back to browser as a response to view the document.

For convenience of users, we have also implemented some sample open source document viewer applications. These open source applications are helpful for the developers to quickly understand and learn the working of the API and develop their own applications. Listed below are the sample open source document viewer applications along with their download links.


You can also evaluate all the features provided by GroupDocs.Viewer for .NET API using our Example Project. All the features are implemented as methods in this project.

Please find below some useful resources to quickly get started.


If any thing is not clear at your end, please feel free to ask.

Warm Regards

3

Thank you very much for your prompt reply.


But I am facing a issue of “Unlicensed version of GroupDocs.Viewer for .NET allows 15 views per hour.”
It is bit tricky, we are planning to buy license for Groupdocs, but this error is bit tricky because we are developing POC and when we are trying to show POC (working example) of group doc to end customer, it shows message “Unlicensed version of GroupDocs.Viewer for .NET allows 15 views per hour.”
As a part of POC, you know we need to test multiple things and in the mean time this issue stopping us.

Please suggest how to avoid it?

Thanks in advance.
4

Hi vschib1,


Thanks for posting your issue here.

You are getting this message because of using trial/unlicensed version of GroupDocs.Viewer for .NET API which exposes limited features. There are certain limitations when using API in trial mode. To see the trial limits, please visit this link.

However, GroupDocs also provides the facility of temporary license which is a time-restricted (valid for 30 days) full license to use all the features of the API. To get a temporary license, please go to Get Temporary License and post your request. To know about how to apply the license, please follow this link.

In case of any confusion, please feel free to contact us.

Warm Regards

5

Thanks for your expected response.

We have tested group docs viewer is allowing us to show excel or pdf file in browser by converting files into html.

Next question: is it possible by to display excel in browser and if selected excel file has a some macro (that execute on click of button inside excel workbook/file) then user can click that button in excel file displaying in browser and macro should execute ?

Thanks
6

Hi vschib1,


Thanks for asking the question.

Please note that when the Excel file is rendered into html, all the content of the file is converted into static html page. Thus, it doesn’t not support execution of macro on button click dynamically.

If anything is not clear, please feel free to ask.

Warm Regards
7

Thank you for quick reply.


Other than GroupDocs Viewer, Is there any other tool, to achieve editing excel in browser or execution of macro under excel file in browser by using groupDoc product ?
8

Hi There,


Thanks for your inquiry.

Unfortunately, we don’t have such an API at GroupDocs. However, you can check Aspose.Cells:

http://www.aspose.com/products/cells
http://www.aspose.com/community/forums/aspose.cells-product-family/19/showforum.aspx

But please note that Aspose.Cells is also a UI-less API and works with several Excel elements including Macros. You may post your question in the Aspose.Cells forums to seek more information.

Best Regards
9

Thank you again for reply!


Sorry for asking multiple questions.
One more question: When we are using GroupDocs Viewer to display excel files in browser it is showing each sheet of excel file in pages underneath each other.

Is it possible to display excel with sheet tabs (just like excel file) instead of each sheet in pages by using Viewer ?

Thanks
10

Hi vschib1,


We appreciate you for asking more questions.

The feature of sheet tabs, you mentioned in above post, is not related to back end API. However, you can implement this in your front end viewer application and we are pleased to inform you that this feature is implemented in our sample open source document viewer applications. Listed below are the open source applications along with their download links.


You can try and learn how your desired feature is implemented in the these applications. In case of any confusion, please feel free to ask.

Have a nice weekend ahead.

Warm Regards
11

Thank you for your reply.

As suggested by you in above examples i can see sheet tab (thats what we need) but sheet tabs are not clickable, even if i click sheet-2 it shows sheet 1 data. please refer attached screen shot and suggest, can it be achievable by document viewer that if my excel file has 5 sheets it should shows all sheet tab and on click of any sheet tab it should show content of selected sheet?
Thanks
12

Hi vschib1,


Thanks for raising your issue.

We have checked sheet tabs feature in our open source document viewer applications but could not reproduce your issue. Sheet tabs are clickable and working fine at our end. Can you please provide us the Excel file you are using? Also, please mention either you are using <a rel=“nofollow” href=“https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET/tree/master/Showcases/ASP.NET_MVC_Front_End” style=“font-size: 14px; line-height: 20px; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; transition: all 0.3s ease 0s; color: rgb(132, 156, 183); outline: 0px; background-color: rgb(255, 255, 255);”>ASP.NET_MVC_Front_End or <a rel=“nofollow” href=“https://github.com/groupdocs-viewer/GroupDocs.Viewer-for-.NET/tree/master/Showcases/ASP.NET_WebForm_Front_End” style=“font-size: 14px; line-height: 20px; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; transition: all 0.3s ease 0s; color: rgb(0, 169, 210); text-decoration: none; background-color: rgb(255, 255, 255);”>ASP.NET_WebForm_Front_End?
We shall be waiting for your response.

Warm Regards
13

Hi Please find links for attachement.

Please try to see "TestSheetsTab.xls" under App_data folder and sheet 2 is not click able in browser.

Although as per my requirement, i need to implement this in simple HTML.agularJs under .net page just one of your previous example "GroupDocs.Viewer.NewFrontEnd" if possible please share example of same with sheet links. Please also find attached my actual project, if possible please implement sheet links in "GroupDocsWithAngularJS" - its a VS2013 project/solution with html page and angularJS.


And please also suggest, if document viewer can convert any excel or pdf file into html (to display in browser) but without storing on disk, so that we don't need to give write permission to any folder on web server ?


Thanks.



https://synechron-my.sharepoint.com/personal/vikramjeet_singh_synechron_com/_layouts/15/guestaccess.aspx?guestaccesstoken=YThw3xqSdjZRjyMqVw9z6tnCeBAq4ZnMHVw7ATJJgS8%3d&docid=15f3333153db34babaf0c2c930d1c971d&expiration=2016-07-19T12%3a26%3a30.000Z



https://synechron-my.sharepoint.com/personal/vikramjeet_singh_synechron_com/_layouts/15/guestaccess.aspx?guestaccesstoken=%2fBeJIn9pZ0hcQaLmJJNKfGnMKkUltiD2tLut7Hhslk0%3d&docid=1527dd30f59ab4dcbaa3ba896a0dabe8c&expiration=2016-07-19T12%3a27%3a30.000Z

14
Hi there,

Thanks for providing the problematic file.

We have checked TestSheetsTab.xls in sample front end applications and sheet tabs are working perfectly fine in Chrome, Fire Fox and IE. I have also attached the screen shot for you. Furthermore, please mention the browser name and its version so that we can check it more precisely. Also, please make sure that you have downloaded latest copy of front end applications from GitHub.

Secondly, New Front End is developed only to demonstrate the basic features provided by GroupDocs.Viewer API whereas ASP.NET_WebForm_Front_End and ASP.NET_MVC_Front_End are developed to fulfill the requirements of commercial use. However, I have added your request of adding sheet tabs feature in New Front End in the queue. We shall look into it and once we have any information on it, we will notify you.

vschib1:

And please also suggest, if document viewer can convert any excel or pdf file into html (to display in browser) but without storing on disk, so that we don't need to give write permission to any folder on web server ?

For this purpose, GroupDocs.Viewer for .NET provides feature of implementing custom input data handler. To read more about it, please follow this link.


If any thing is not clear, please feel free to ask.

Warm Regards
15

Hi

Thanks for your reply,
(1) I am least interested in WebForm and MVC above projects, because my actual requirement is, I have HTML page using angularJS (i.e GroupDocsWithAngularJS) project that i shared yesterday. Please suggest how to handle sheets tabs in this project. If you can please suggest solution to handling of sheets in this angularJS project then we may buy license of groupdocs in few days.
New download link for angularJS project:
https://synechron-my.sharepoint.com/personal/vikramjeet_singh_synechron_com/_layouts/15/guestaccess.aspx?guestaccesstoken=0ScbSQ2GoWzgdfg3biHRFKx6msKAveL%2fkF67actL%2b9s%3d&docid=0527dd30f59ab4dcbaa3ba896a0dabe8c&expiration=2016-07-20T07%3a39%3a22.000Z

(2) I downloaded (1.1) <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-9f4511974f322063eab4cf52c89db7a74c70857f” title=“ASP.NET_WebForm_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>ASP.NET_WebForm_Front_End and (1.2) <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-d6d8fec9db01521e79415793c0e0ae652e4a456d” title=“ASP.NET_MVC_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>ASP.NET_MVC_Front_End when i am running MVC -1.2 its showing error in build, seems like you are locally using some modified version of viewer DLL and in uploaded project its different. Please find attached project along with excel (Errors_ASP_NET_MVC_Front_End.xls) containing error details.
Link to download :
https://synechron-my.sharepoint.com/personal/vikramjeet_singh_synechron_com/_layouts/15/guestaccess.aspx?guestaccesstoken=%2ffGMtc3SQZdZ5292tJc3sr5abbmeCwxjT58SIhYwmfY%3d&docid=0dd4af3c1992b45be9b26f4db8051936a&expiration=2016-07-20T07%3a33%3a24.000Z

(3) On <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-9f4511974f322063eab4cf52c89db7a74c70857f” title=“ASP.NET_WebForm_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>ASP.NET_WebForm_Front_End , its code is working, no error like MVC but sheet links are still not working. On your question of which browser I am using, its IE10 and Chrome <span style=“color: rgb(48, 57, 66); font-family: “Segoe UI”, Tahoma, sans-serif; font-size: 12px;”>Version 51.0.2704.106.
<span style=“color: rgb(48, 57, 66); font-family: “Segoe UI”, Tahoma, sans-serif; font-size: 12px;”>
<span style=“font-family: “Segoe UI”, Tahoma, sans-serif; font-size: 12px;”>Note: Point 2 and 3 are just for your questions but my requirement is point 1, so if possible please respond to point 1 ASAP, as point 2 & 3 are not my exact requirement. Thanks

Thanks

<span style=“color: rgb(48, 57, 66); font-family: “Segoe UI”, Tahoma, sans-serif; font-size: 12px;”>
16

Hi vschib1,


Thanks for sharing the details with us.

I am writing inline answers against each of your raised points.

(1) I am least interested in WebForm and MVC above projects, because my actual requirement is…

You can get help and learn from our open source front end applications to implement these features in your own document viewer using AngularJS. We are also adding your request for the solution in the queue of our development plans. However, because of already pending tasks in the queue, we can not share any ETA with you. Whenever we have any solution for you, we will inform you without any delay. We appreciate your patience and cooperation in this regards.

(2) I downloaded (1.1) <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-9f4511974f322063eab4cf52c89db7a74c70857f” title=“ASP.NET_WebForm_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap;”>ASP.NET_WebForm_Front_End and (1.2) <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-d6d8fec9db01521e79415793c0e0ae652e4a456d” title=“ASP.NET_MVC_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap;”>ASP.NET_MVC_Front_End when i am running MVC -1.2 its showing error in build…

It seems that you are using older version of GroupDocs.Viewer for .NET API. Please download and use latest version (3.4.0) from below links to get rid of the errors you are facing.


(3) On <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-9f4511974f322063eab4cf52c89db7a74c70857f” title=“ASP.NET_WebForm_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap;”>ASP.NET_WebForm_Front_End , its code is working, no error like MVC but sheet links are still not working…

We tried the sheet tabs feature in same browsers with the same versions, but still we are unable to reproduce your issue at our end. Please check your browser’s console if you are getting any error message while clicking the sheet tabs.

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

Best Regards

17

Thank you very much for your detailed response.

(1) On your response “open source front end applications to implement these features…” any link to get idea on same ?

(2) On MVC, Will check by latest DLL, in my current project its 3.1.0.0

(3) On <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-9f4511974f322063eab4cf52c89db7a74c70857f” title=“ASP.NET_WebForm_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; font-size: 14px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap;”>ASP.NET_WebForm_Front_End , Will see if it make sense for my requirement and will come back on same.
18

Hi again,


You can check the implementation of sheet tabs feature in any of the following sample front end applications. This will surely help you to implement this feature in your own document viewer.

  • <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-e9139d8606ab29d21d60950a45eabadbfd919528” 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-9f4511974f322063eab4cf52c89db7a74c70857f” 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

If anything is not clear, please feel free to ask.

Best Regards
19

Thanks for your response.


If possible can you please provide any hint for any specific code part for sheet feature in
  • <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-e9139d8606ab29d21d60950a45eabadbfd919528” title=“ASP.NET_MVC_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; 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-9f4511974f322063eab4cf52c89db7a74c70857f” title=“ASP.NET_WebForm_Front_End” style=“transition: all 0.3s ease 0s; color: rgb(64, 120, 192); text-decoration: none; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; line-height: 20px; white-space: nowrap; background-color: rgb(255, 255, 255);”>ASP.NET_WebForm_Front_End
Thanks

20

Hi there,


To know about how sheet tabs are implemented in sample front end applications, please see installableViewer.js and GroupdocsViewer.all.js files located in Scripts folder. If you face any issue in locating these files, please let us know.

Have a nice day.

Warm Regards