Render Pdf without font

Question

I'm C# developer and have problem with rendering PDF document with web fonts. My document is rendering without font(http://localhost:60757/Home/DownloadPdf), but in my browser rendered view looks good(http://localhost:60757/Home/PdfTemplate). I tried to find a solution and read about fonts(https://jsreport.net/blog/fonts-in-pdf), but I cannot solve it.

I include my github project: https://github.com/Dev781/App

Any ideas?

Answer 1

1. I notice that your project references a version of 1.x . I suggest you should update dependencies to 2.x (I tried again and again , but failed when using a version of 1.x):

   "dependencies": {
       "jsreport-assets": "^1.0.1",
       "jsreport-chrome-pdf": "^1.1.5",
       "jsreport-core": "^2.2.0",
       "jsreport-express": "^2.2.2",
       "jsreport-jsrender": "^2.0.0",
       "jsreport-phantom-pdf": "^2.1.3",
       "jsreport-scripts": "^2.0.6",
       "jsreport-templates": "^2.0.0",
       "puppeteer": "^1.8.0"
   }
   

2. I'm not sure whether there's a bug in the phantom recipe . However , the same code which works with chrome and html will not work on phantom . So I add a recipe of chrome-pdf :

   const options = {
       tasks: {strategy: 'in-process'},
       autoTempCleanup: false,
   }
   
   const jsreport = require('jsreport-core')(options) 
       .use(require('jsreport-templates')())
       .use(require('jsreport-jsrender')())
       .use(require('jsreport-scripts')())
       .use(require('jsreport-phantom-pdf')({ }))
       .use(require('jsreport-chrome-pdf')({ }))
       .use(require('jsreport-assets')({
           allowedFiles: "**/*.*",
           searchOnDiskIfNotFoundInStore: true,
       }))
       ;
   

3. And now we can add a font and an asset configuration .

   var myfont={
       "name": "myfont.woff2",
       "link": "wwwroot/jsreport-assets/fonts/myfont.woff2"
   }
   
   jsreport.init()
       .then(async(reporter) => {
           var assets=reporter.documentStore.collection("assets");
           await assets.insert(myfont);
           return reporter;
       })
       .then(reporter => reporter.render({
           template: {
               content: data,
               engine: 'jsrender',
               recipe: 'chrome-pdf',
               chrome: {
                   format: 'A4',
                   margin: { top: 0, right: 0, bottom: 0, left: 0 },
                   orientation: "landscape"
               }
           },
           data: { }
       })).then((resp) => {
           callback(null, resp.content.toJSON().data);
       }).catch(e=>callback(e,null));
   

4. Lastly , we can now embedding a base64 encoded font :

   @@font-face {
       font-family: 'MyFont';
       font-weight: 10000;
       font-style: italic;
       src: url('{#asset myfont.woff2 @@encoding=dataURI}') format('woff2');
       unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   } 
   * {
       font-family: 'MyFont';
   }
   

I use double @ here because you will have the template rendered by Razor first .

Here's a screenshot it works :