CODEWITHSUNDEEP
.netfontsjsreport
MoeHamdan
MoeHamdan

Reputation: 76

.net core JSReport custom fonts

Anybody knows how to tell jsreport about the custom fonts when loading it in .net core?

jsreport does not seem to load the font, no matter what and there is no clear documentation on how to do it in .net.

Program.cs: `

AddJsReport(new LocalReporting().UseBinary(RuntimeInformation.IsOSPlatform(OSPlatform.Windows)  ?
            jsreport.Binary.JsReportBinary.GetBinary() :
            jsreport.Binary.Linux.JsReportBinary.GetBinary())
        .KillRunningJsReportProcesses()
        .AsUtility()
        .Create());

`

Controller.cs: `

HttpContext.JsReportFeature().Recipe(Recipe.ChromePdf)
            .DebugLogsToResponse()
            .Configure((r) =>
            {
                r.Options.Base = $"http://127.0.0.1:{HttpContext.Request.Host.Port??80}";
                r.Template.Chrome = new Chrome
                {
                    MarginTop = "0mm",
                    MarginLeft = "0mm",
                    MarginBottom = "0mm",
                    MarginRight = "0mm",
                    Format = "A4",
                    WaitForNetworkIddle = true,
                };
            });

`

css: `

@font-face {
    font-family: Athletics Regular;
    src: url('fonts/Athletics/Athletics-Regular.otf');
}

`

Upvotes: 0

Views: 259

Answers (2)

MoeHamdan
MoeHamdan

Reputation: 76

Well apparently, the only way this worked is first by creating jsreport folder and add the assets to the folder enter image description here

Then add this in the header as it seems that it does not work in .css file at all. enter image description here

Also in startup I had to configure jsreport with the following .Configure(cfg => cfg.DoTrustUserCode().FileSystemStore())

Finally make sure you tell .net to copy the jsreport to output folder.

<ItemGroup>
    <None Include="jsreport\**" 
          CopyToOutputDirectory="PreserveNewest"/>
</ItemGroup>

Upvotes: 0

Jan Blaha
Jan Blaha

Reputation: 3095

The font request is likely blocked by CORS.

How to find out?
Render the report through your app and open jsreport v3 profiler at http://localhost:5488 There you probably see something like

Access to the font at 'http://localhost:61338/fonts/Athletics-Regular.otf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How to solve
You can enable CORS for static resources like fonts in your app. This is part of the standard .net core app config.

The second solution is to disable CORS checks in the chrome used by jsreport to print the pdf. This can be done like this:

Environment.SetEnvironmentVariable("chrome_launchOptions_args", "--disable-web-security");

Upvotes: 0

Related Questions