How to apply assets



  • 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.



  • 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>
    

Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.