How to apply assets

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.

jan_blaha

Could you provide the error message with jsreport failed start?
How do you install and start jsreport?

You can put the test.css to the directory where is jsreport started from.
Add to the config this line (you don't need to configure assets explicitly).

{
   ...
   "allowLocalFilesAccess": true
}

And this should work then

<style>
{#asset test.css}
</style>