How to user Telerik Reporting in Linux enviroment?

[平]

We used the Telerik Reporting by Dotnet Framwork4.5.2 for a long time.

But now we are going tu update our programing.

We are going tu use Dotnetcore3.1,ubuntu,vscode(IDE) for development. 

I saw the DOCS and try the "GETTING STARTED".

But I just find how to use it by vs Studio.

So I want to know that is the Telerik Reporting can be used in linux by vscode?

And show me the docs link Please.

 

Thank you very much!

[平]

I found this document.

https://docs.telerik.com/reporting/manual-setup-of-html5-report-viewer-in-asp-net-core-2

But I want to creat 64bit file in dotnetcore3.1 API.

Is it support?

[Dimitar]

Hi 平,

In Linux, we use the library libgdiplus, which is a Mono implementation of GDI+ API for non-Windows operating systems. Note that, since libgdiplus is not a perfect replacement for the Windows graphics library, the rendered reports may differ in terms of text positioning, word-wrapping, and aligning. These problems mostly affect the Image rendering extension hence it is not recommended to be used. Please, check Using Telerik Reporting in Applications on Linux Platform section for further information. 

As for the ASP.NET Core 3.1 API, if I understand correctly you want an article on how to manually set up the HTML5 Report Viewer in a .NET Core 3+  application. Please correct me if I'm wrong.

The following article explains how to do that:

- How to use HTML5 Report Viewer in ASP.NET Core 3+ application

Just in case you were asking me about how to create an ASP.NET Core 3.1 Reporting API, I will also link the following article:

- How to host Reports Service in ASP..NET Core 3+ Applications

Lastly, about Visual Studio Code,  you might need to include a NuGet.Config file inside your project where you add a package source for the Telerik Reporting references. An example of such a config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <packageSources>
	<add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
	<add key="TelerikReporting" value="[Path]" />
 </packageSources>
</configuration>

Also, in VS Code you won't be able to use the ready templates for the report viewers, which means that you will need to write them manually. However, there is sufficient documentation for every report viewer so you will have no problems in creating them,  just something to keep in mind.

I hope that I have been able to help out, please let me know if you have any questions.

Regards, Dimitar Progress Telerik

[平]

Hi Dimitar,

Thank you for your help!

But I don't want to manually set up the HTML5 Report Viewer.

Our client is build by Angular.For example when I want to get the report,I'll click a button on Browser.

And then the Angular client program will send a request to the service

I just want to make the repory file by Telerik Reporting in DotnetCore 3.1 API.

And the service send the file as the fileStream to client.

At lase user can download the file on browser without to see the HTML5 Report Viewer.

Am I making myself clear?

[Neli]

Hi,

You can use the approach from Using .NET Core 3 Project as a Service in Angular Report Viewer KB article. Note that for .NET Core projects, we recommend the usage of TRDP reports- such that are created in the Standalone designer.

Another option is to create the report in our Visual Studio report designer which is built against the .NET Framework. Then you can create a .NET Core or a .NET Standard Class Library and add the CS file of the report in order to have the report in .NET. 

I hope this information helps you. Please, let me know if you have further questions.

Regards,
Neli
Progress Telerik

[平]

Hi,Neli

Thanks for your help!

I readed the document which you show me,and I thing I know that how does angular progarm show the report by telerik-angular-report-viewer.

I also has a question ,if I don't want to show the report in browser,I just want to get the pdf or excel of the report without showing the report in a browser.

Can I do that？

 

[Neli]

Hello,

You can use ReportProcessor.RenderReport to export the report programmatically without showing it to the viewer. You may also find helpful the Embedded Report Engine article.

Please, let us know if you need further assistance.

Regards,
Neli
Progress Telerik

[平]

hi

I tried to use the. Net core 3 project as a service in angular report viewer, and put rest service report on the server side of. Net core 3.

However, when I use the angular report viewer to access the rest service report, I want to cross domain access. I use CORS and set some authentication information in the HTTP header.

So, how do I set up serviceurl or Reportserver?

[Nasko]

Hi 平,

Yes, CORS should be enabled in order to access the REST service.

The ServiceUrl/ReportServer is configured in the report viewer declaration on the page, for example:

<tr-viewer 
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="'http://myrestserviceurl/api/reports'"
    [reportSource]="{
        report: 'Product Catalog.trdp',
        parameters: {}
    }"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0">
</tr-viewer>

More information is available in the How to Use Angular Report Viewer with Angular CLI help article.

Regards,
Nasko
Progress Telerik

[平]

Hi

Thank you for your reply!

As you said, I set the serviceurl on the angular side and specify this URL to the rest service I made locally, but I can't add custom authentication intelligence to the HTTP header. For example, when I use HTTP request in TS code, I add the following authentication intelligence to the header, such as

return this.http.get(this.getBaseURL() + url,
{ observe: 'response', params: httpParams, headers: this.getGetHeaders() })

private getGetHeaders(): any {
  const localStorage: ITxHttpHeader = this.getHttpHeaderData();
  const res = {
    'X-xxxxx-UserName': localStorage.userName || '',
    'X-xxxxx-IDToken': localStorage.idToken || '',
    'X-xxxxx-AccessToken': localStorage.accessToken || ''
  };
  return res;
}

Can I do the same in angular report viewer?

In addition, when I tried to create a simple bill with reference to how to use angular report viewer with angular cli, I encountered several problems,
OS：linux x64，
Angular CLI: 6.2.4
@progress/ telerik-angular-report-viewer@11.20.1118
REST service（.netCore3.1）

<tr-viewer #viewer1
  [containerStyle]="viewerContainerStyle"
  [serviceUrl]="'http://localhost:5000/api/reports/'"
  [reportSource]="{
    report: 'Barcodes Report.trdp',
    parameters: {}
  }"
  [viewMode]="'INTERACTIVE'"
  [scaleMode]="'SPECIFIC'"
  [scale]="1.0"
  [ready]="ready"
  [viewerToolTipOpening]="viewerToolTipOpening"
  [enableAccessibility]="false">
</tr-viewer>

Question 1
Error loading the report viewer's templates. (trvTemplateUrl = ' http://localhost :5000/api/reports/resources/templates/telerikReportViewerTemplate-14.2.20.1118.html/').
I think the current angular report viewer is the latest version, but why is this error?
To solve this problem, I specify templateurl as the local file,
[templateUrl]="'..\\assets\\telerik ReportViewerTemplate.html ''

Question 2
POST http://localhost :5000/api/reports/clients/872a86e1e0e/parameters 500 (Internal Server Error)
Error: Uncaught (in promise): Cannot read a document with the specified schema: http://schemas.telerik.com/reporting/2020/2.0.
You might be using an older version of the product.
The report comes from C: / / program files (x86) / progress / telerik reporting R3 2020 / report designer / examples. I think it may be due to the version of the file, so I changed a file.

  Report: ' BarcodesReport.trdp',

The report comes from the \reporting-samples-master\AngularReportViewerInMultipleTabs\MyRestService\MyRestService\Reports of GitHub.

But A new error has occurred this time,
POST http://localhost :5000/api/reports/clients/aae66f14261/parameters 500 (Internal Server Error)
Error: Uncaught (in promise): Type: Telerik.Reporting.ReportSerialization . Current.ReportSerializable `1[ Telerik.Reporting.Report ]

Can you tell me what happened and how to solve it?

Question 3
So, I changed another way, referring to GitHub's vs designer core, and using vs designer report, which is also the way I want to achieve most, because I just want to move vs designer report from Windows OS to Linux, and I don't want to change the style of report.
  report: ' Telerik.Reporting.Examples . CSharp.BarcodesReport , CoreReportLibrary',
  parameters: {}
Unfortunately, there are also mistakes,
POST http://localhost :5000/api/reports/clients/9b5646862b0/parameters 500 (Internal Server Error)
Error: Uncaught (in promise): Invalid report type

Can anyone help me.
thank you.

[Smith]

Hi.... Linux uses the new SDK-style project and utilizes appsettings.json as a configuration file. To work these settings in your ASP.NET Core application, it is recommended that you only instantiate a ConfigurationService in your application’s Startup class. Then, use the Options pattern to configure individual settings. For example, the ConnectionStrings setting in JSON-based format would look like this

[Nasko]

Hi 平,

From the described error messages, it seems like the version of the Angular Report Viewer (11.20.1118) and the version of the Reporting REST service do not match. Can you check the version of the Telerik Reporting DLLs used in your .NET project and share the findings here?

Regards,
Nasko
Progress Telerik

[平]

Hi,Smith

Thanks for your help, but I don't quite understand what you mean. I think I can cross-origin access, but I can't pass user authentication later. The details are as follows:
In my project, the existing practice is like this,
return this.http.get ( this.getBaseURL () + url, { observe: 'response', params: httpParams, headers: this.getGetHeaders () })
private getGetHeaders(): any {
  const localStorage: ITxHttpHeader = this.getHttpHeaderData ();
  const res = {
    'X-xxxxx-UserName': localStorage.userName || '',
    'X-xxxxx-IDToken': localStorage.idToken || '',
    'X-xxxxx-AccessToken': localStorage.accessToken || ''
  }
  return res;
}
In this way, the authentication information is added to the HTTP header, and then the HTTP request is sent. Only in this way can it pass the back-end authentication.
However, in angular, I can only set the serviceurl, but I can't add the authentication information to this HTTP request. I want to know, can I add the user-defined authentication information when sending the request in angular report viewer?

[平]

Hi，Nasko

Thanks for your help!

The previous version of reporting rest service I used was 13.2.19.1030, and then I upgraded it to 14.2.20.1021, as follows:
<PackageReference Include=" Telerik.Reporting " Version="14.2.20.1021" />
<PackageReference Include=" Telerik.Reporting.OpenXmlRendering " Version="14.2.20.1021" />
<PackageReference Include=" Telerik.Reporting.Services .AspNetCore" Version="14.2.20.1021" />
<PackageReference Include=" Telerik.WebReportDesigner.Services " Version="14.2.20.1021" />
However, question 1 and question 3 that I described before still exist. In question 2, the following error disappears,
  Error: Uncaught (in promise): Cannot read a document with the specified schema: http://schemas.telerik.com/reporting/2020/2.0.
  You might be using an older version of the product.
But another mistake remains.
Does the version I am using meet the requirements? Or something else?
In addition, I am visiting http://localhost : 5000 / API / reports / formats, the result can be returned normally.

[Eric R | Senior Technical Support Engineer]

Hi 平,

There seems to be several different issues going on. To make this simpler, I believe it may be more helpful to provide a working sample and use it as a baseline for comparison. Let me go over the example below.

Angular Report Viewer

I find it easier to work with Angular applications by using the Asp.Net Core SPA Templates. Note that the attached sample uses the same template and is optional. I have left comments in the Startup.cs and csproj files for removing this if desired.

With that out of the way, let me address the questions directly below.

Question 1

Since ASP.NET Core is delivering the resources and there is no template customization the templateUrl declaration is not necessary.

Additionally, the date of all Telerik.Reporting.* assemblies and the Angular Report Viewer needs to match. In this case, ensure the last two sections match. For reference, the format of the version number is [MAJOR].[MINOR].[YEAR].[MMDD] and matches Telerik Reporting version,14.2.20.1021.

To resolve this, change the Angular Report Viewer package version to 11.20.1021. Note the bolded section matches the Telerik Reporting version year and month-day value. To see the versions of the Angular Report Viewer, this are listed at npmjs.

Question 3

I am not 100% sure on this error. Comparing your project to the attached sample should identify the issue. If it doesn't let's open a new support ticket for further investigation. This can be done through your Telerik Account page. 

Authentication Question

This can be handled using the setAuthenticationToken method on the Angular Report Viewer. In your specific example, I believe you would read localStorage and then call the method. See the Angular Report Viewer - Methods documentation for more details.

Alternatively, the Report Viewer includes an authenticationToken property as well. See the Angular Report Viewer - Options documentation for more information.

Wrapping Up

To run the sample ensure the Telerik NuGet Feed is Configured using the CLI on Linux. I found it easiest to use the nuget included with the dotnet core sdk. See the following command that I used. Note that encrypted passwords are note available for non-Windows environments.

dotnet nuget add source "https://nuget.telerik.com/nuget" -n "telerik.com" -u "TELERIK_ACCOUNT_USERNAME" -p "TELERIK_ACCOUNT_PASSWORD" --store-password-in-clear-text

Please let me know if you have any issues with the sample or if you would like to create a new support ticket for any remaining issues. Thank you for using the Telerik Reporting forums.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik

[平]

hi Eric R

Thank you very much for your help.

Because of your help, I have solved some problems, but there are still some problems.
After that, I will open a new support ticket and use the sample you gave me to explain the problem.