Stimulsoft Business Intelligence System | Forum

Posted: **Thu Sep 16, 2021 4:20 pm**

Greetings.

We're in the process of converting an application from old MVC to angular + WebAPI: in the new application, we generate reports directly on the front-end instead than on the back-end, thanks to Stimulsoft Reports.JS (we're using package "stimulsoft-reports-js": "2020.1.1", since it's the last one for which we have a valid license)

In the old application, an mrt file is loaded (please see attachments) which is then provided with data in the backend, and then a PDF is generated and sent to the front-end, with the following sample code:

Code: Select all

                
                StiReport report = new StiReport();
                report.Load(Server.MapPath("~/Content/Report/ReportDifettiAuditDeliberaPerOperatore.mrt"));

                //..provide report with data
                report.RegData("TestataDeliberaDto", firstDatasource);
                report.RegData("DifettoDeliberaDto", secondDatasource);
                
                report.Compile();

Now, using the same mrt (we haven't changed anything), we're generating the report directly on the front-end of the new application, by doing the following:

Code: Select all

    const testataDataSet = new Stimulsoft.System.Data.DataSet('TestataDeliberaDto');
    testataDataSet.readJson({ TestataDeliberaDto: firstDatasource });

    const difettiDataSet = new Stimulsoft.System.Data.DataSet('DifettoDeliberaDto');
    difettiDataSet.readJson({ DifettoDeliberaDto: secondDatasource });

    const report = new Stimulsoft.Report.StiReport();
    report.loadFile('assets/reports/ReportDifettiAuditDeliberaPerOperatore.mrt');

    report.regData(testataDataSet.dataSetName, '', testataDataSet);
    report.regData(difettiDataSet.dataSetName, '', difettiDataSet);

    this.viewer.report = report;
    this.viewer.renderHtml('viewer');

Everything works flawlessly except for dynamic images, passed as array of bytes in the second datasource: for each element of datasource "DifettoDeliberaDto", we have a property that in C# was of type byte[] (byte array) and it was used to encode an image, which as you can see in the MRT is displayed in a grid for each element.

We supposed that we had to use type Uint8Array with typescript, but for some reason such images never display, even if the rest of the report renders perfectly in the viewer (including static images, like logo etc..).

So, objects from the second datasource are instances of this class:

Code: Select all

export class DifettoDeliberaDto {
    Codice: string;
    Descrizione: string;
    ListaResponsabilita: string;
    PesoCodiceOld: string;
    PesoCodiceNew: string;
    Tipo: string;
    NoteCreazione: string;
    ImmagineDifetto: Uint8Array; //this is the image property
}

We also tried to change "ImmagineDifetto" field to number[], Array<number>, without any success)

So, we performed this other test: we took note of the image bytes that are passed to the report in C# (we used a very small test image, with less than 200 bytes) through the debugger:

Code: Select all

[137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 3, 0, 0, 0, 3, 8, 6, 0, 0, 0, 86, 40, 181, 191, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 9, 112, 72, 89, 115, 0, 0, 14, 194, 0, 0, 14, 194, 1, 21, 40, 74, 128, 0, 0, 0, 27, 73, 68, 65, 84, 24, 87, 99, 124, 43, 163, 242, 159, 1, 10, 24, 255, 215, 171, 35, 56, 64, 12, 229, 48, 48, 0, 0, 150, 205, 5, 211, 149, 46, 77, 162, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]

The image is perfectly displayed in the old application. Instead, with Reports.JS (version 2020.1.1), even if we manually pass exactly the same bytes (as Uint8Array) nothing is displayed.

Could you please help us finding the cause of this problem?

Thank you

Posted: **Fri Sep 17, 2021 1:28 pm**

Hello,

Please send us a test data for your report or sample project that we can run and reproduce the issue.

Thank you.

Posted: **Mon Sep 20, 2021 8:59 am**

Greetings!

As requested, we've included an attachment with the sample which reproduces the problem.

You should be able to run with the commands:

npm install, followed by ng serve.

Then go to the address localhost:4200/home

You will find all the code for the report generation at the following path:

src/app/routes/home/home/print-difetti-sessione.

We also include such code right here for your convenience:

Code: Select all

import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';

declare var Stimulsoft: any;

@Component({
  selector: 'app-print-difetti-sessione',
  templateUrl: './print-difetti-sessione.component.html',
  styleUrls: ['./print-difetti-sessione.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class PrintDifettiSessioneComponent implements OnInit, OnDestroy {

  options: any = new Stimulsoft.Viewer.StiViewerOptions();
  viewer: any = new Stimulsoft.Viewer.StiViewer(this.options, 'StiViewer', false);
  

  private subscriptions = new Subscription();

  constructor() { }

  ngOnInit() {
    const testataDataSet = new Stimulsoft.System.Data.DataSet('TestataDeliberaDto');
    testataDataSet.readJson({ TestataDeliberaDto: {
      VAN: 'VAN',
      GAN: 'GAN',
      Mini_desc: 'mini_desc',
      DataProduzione: new Date(),
      DataInizioAcquisizione: new Date(),
      TotalePesoNewDifettiEstetici: 1,
      TotalePesoNewDifettiFunzionali: 2,
      TotalePesoOldDifettiEstetici: 3,
      TotalePesoOldDifettiFunzionali: 4,
    } });

    const difettiDataSet = new Stimulsoft.System.Data.DataSet('DifettoDeliberaDto');
    difettiDataSet.readJson({ DifettoDeliberaDto: [{
        Codice: 'code 1',
        Descrizione: 'description 1',
        ListaResponsabilita: 'a, b',
        PesoCodiceOld: '1',
        PesoCodiceNew: '2',
        Tipo: 'type 1',
        NoteCreazione: 'notes 1',
        // these same pic bytes generate a small picture if the report is generated on the backend with C# code: on the front-end nothing is displayed instead..
        ImmagineDifetto: [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 3, 0, 0, 0, 3, 8, 6, 0, 0, 0, 86, 40, 181, 191, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 9, 112, 72, 89, 115, 0, 0, 14, 194, 0, 0, 14, 194, 1, 21, 40, 74, 128, 0, 0, 0, 27, 73, 68, 65, 84, 24, 87, 99, 124, 43, 163, 242, 159, 1, 10, 24, 255, 215, 171, 35, 56, 64, 12, 229, 48, 48, 0, 0, 150, 205, 5, 211, 149, 46, 77, 162, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]
      },
      {
        Codice: 'code 2',
        Descrizione: 'description 2',
        ListaResponsabilita: 'b, c',
        PesoCodiceOld: '2',
        PesoCodiceNew: '3',
        Tipo: 'type 2',
        NoteCreazione: 'notes 2',
        // these same pic bytes generate a small picture if the report is generated on the backend with C# code: on the front-end nothing is displayed instead..
        ImmagineDifetto: [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 3, 0, 0, 0, 3, 8, 6, 0, 0, 0, 86, 40, 181, 191, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 9, 112, 72, 89, 115, 0, 0, 14, 194, 0, 0, 14, 194, 1, 21, 40, 74, 128, 0, 0, 0, 27, 73, 68, 65, 84, 24, 87, 99, 124, 43, 163, 242, 159, 1, 10, 24, 255, 215, 171, 35, 56, 64, 12, 229, 48, 48, 0, 0, 150, 205, 5, 211, 149, 46, 77, 162, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]
    }] });

    const report = new Stimulsoft.Report.StiReport();
    report.loadFile('assets/reports/TestReport.mrt');

    report.regData(testataDataSet.dataSetName, '', testataDataSet);
    report.regData(difettiDataSet.dataSetName, '', difettiDataSet);

    this.options.toolbar.viewMode = Stimulsoft.Viewer.StiWebViewMode.Continuous;

    this.viewer.report = report;
    this.viewer.renderHtml('viewer');
  }

  ngOnDestroy(){
    this.subscriptions.unsubscribe();
  }
}

export class TestataDeliberaDto {
  VAN: string;
  GAN: string;
  Mini_desc: string;
  DataProduzione: Date;
  DataInizioAcquisizioneAudit: Date;
  TotalePesoNewDifettiEstetici: number;
  TotalePesoNewDifettiFunzionali: number;
  TotalePesoOldDifettiEstetici: number;
  TotalePesoOldDifettiFunzionali: number;
}

export class DifettoDeliberaDto {
  Codice: string;
  Descrizione: string;
  ListaResponsabilita: string;
  PesoCodiceOld: string;
  PesoCodiceNew: string;
  Tipo: string;
  NoteCreazione: string;
  ImmagineDifetto: number[];
}

Posted: **Tue Sep 21, 2021 9:59 pm**

Hello,

We need some additional time to investigate the issue, we will let you know about the result.

Thank you.
#5006

Posted: **Wed Sep 22, 2021 5:38 pm**

That is fine. Could you please provide us a rough estimate about the time it will take (like a few days or possibly more than that? We ask this question just so that we can better communicate with our client

)

Thanks!

Posted: **Thu Sep 23, 2021 8:27 am**

Hello,

We will let you know about the result as fast as possible.

Also, please check the last release build, there are a lot of fixes with images.

Thank you.

Posted: **Mon Sep 27, 2021 6:55 am**

Hello,

In that case, you should use the following method:
{Stimulsoft.System.Convert.toBase64String([123,123,123,123])}

Thank you.

Stimulsoft Business Intelligence System | Forum

Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Re: Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Re: Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Re: Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Re: Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Re: Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)

Re: Image provided through byte array isn't displayed when report is generated by front-end (through Reports.JS)