jsreport forum

Anton Kobelev

I want to use only one css for all reports in my Angular project. I need to store it inside my project in VS.
How can I do this

I've got RenderService

import { Injectable } from '@angular/core';
import jsreport from 'jsreport-browser-client-dist/jsreport';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class RenderService {
 
  constructor() { 
    jsreport.serverUrl = environment.jsreportServerUrl;
  }

  public async doAsync(placeHolder, content, helpers, recipe, data: any) : Promise<void>  {
    const client = jsreport; 

    async function render () {
      const res = await client.render(document.getElementById(placeHolder), {
        template: {
          content: content,
          helpers: helpers,
          recipe: recipe,
          engine: 'handlebars',
        },
        data: data
      })
  }
  await render().catch(console.error)
}
}

Injected service works fine in components. I'm trying to use single test.css for all reports. Styles works inside template (content). But how can I use shared css for all reports?

There's my example report to render

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script>
        window.JSREPORT_CHROME_PDF_OPTIONS = {
            landscape:  false,
            format: "A4"
        }
    </script>      
  </head>
  <body>
<style>
{#asset test.css}
</style>
<table>
    <thead>
        <tr>
            <th>Time</th>
            <th>W, %</th>
            <th>M, т</th>
        </tr>
    </thead>
        {{#each detail}}
        <tr>
            <td>{{timekeyFormat timekey}}</td>
            <td>{{numberFormat2 values.W4_01xP }}</td>
            <td>{{numberFormat2 values.Fm6_401 }}</td>
        </tr>
        {{/each}}
  </table>
  <table>
  <thead>
      <tr>
          <th>timekey</th>
          <th>Fm6_401</th>
      </tr>
  </thead>
      {{#each detail}}
      <tr>
          <td>{{timekeyFormat timekey}}</td>
          <td>{{numberFormat values.Fm6_401 5}}</td>
      </tr>
      {{/each}}
      <tr>
          <td>{{numberFormat (total detail 'Fm6_401') 2}}</td>
      </tr>
  </table>
  </body>
</html>

test.css

table {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;
    border-collapse: collapse;
    text-align: center;
    }
    th, td:first-child {
    background: #AFCDE7;
    color: white;
    padding: 10px 20px;
    }
    th, td {
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: white;
    }
    td {
    background: #D8E6F3;
    }
    th:first-child, td:first-child {
    text-align: left;
    }

Get Error: Asset test.css not found at readAsset

I've tried add in jsreport.config.json

"extensions": {
"assets": {
    "allowedFiles": "static/**.css",
    "searchOnDiskIfNotFoundInStore": false,
    "publicAccessEnabled": true
  }
…
}

Jsreport doesn't start after that.

Posts made by Anton Kobelev