CODEWITHSUNDEEP
pdfgulptaskpdfmake
GreatNews
GreatNews

Reputation: 675

Problem running gulp task 'buildFonts' to export PDF with HTML icons

I'm working with JQuery Datatables (v1.10.18) in an ASP NET Project with WebForms. Being concise, I'm trying to export the table to PDF. It works fine. The only problem I have is that in some tables, there're some HTML icons like 'fa fa-check' which are not shown in the PDF.

It's worth mentioning I set

stripHtml: false,

I'm following the steps described in https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/#1-create-a-new-vfs-fonts-js-containing-your-font-files

However, I cannot make it work. The step 'Run gulp buildFonts to create a new build/vfs_fonts.js (you can update gulpfile.js to change the base directory path or to add an alternative config for the buildFonts task).' is giving me problems.

It's good to know is the first time I use 'gulp' so I was guiding myself through examples I found on the web and in the documentation of gulp and pdfmake

I define the file 'gulpFile.js' in the folder 'pdfmake-0.1.36' (which is the folder that contains the pdfmake.js and vfs_fonts.js scripts needed to export to PDF).

Then, in 'gulpFile.js' I define: 

    const gulp = require('gulp');
    const gulpFont = require('gulp-font');

    gulp.task('buildFonts', function () {
    console.log('starts');
    gulp.src('/examples/fonts/.{ttf,otf}', { read: false })
    .pipe(gulpFont({
        ext: '.css',
        fontface: '/examples/fonts/',
        relative: '/examples/fonts/',
        dest: '/examples/fonts/',
        embed: ['woff'],
        collate: false
    }))
    .pipe(gulp.dest('/examples/fonts/'));
    console.log('finishes');
  });

In '/examples/fonts/' is placed the 'fontawesome' font which I want to use to export the HTML icons.

Then, in cmd I go to the specific folder and execute

gulp buildFonts

And it prints out

starts
finishes
The following tasks did not complete: buildFonts
Did you forget to signal async completion?

This gulps tasks is supposed to create a new 'vfs_fonts.js' in a new folder 'pdfmake-0.1.36/build/' but it isn't creating anything.

Upvotes: 0

Views: 1813

Answers (1)

maamoun toj
maamoun toj

Reputation: 1

const gulp = require('gulp');
const gulpFont = require('gulp-font');

gulp.task('buildFonts', async function () {
    console.log('starts');
    await gulp.src('/examples/fonts/.{ttf,otf}', { read: false })
          .pipe(gulpFont({
              ext: '.css',
              fontface: '/examples/fonts/',
              relative: '/examples/fonts/',
              dest: '/examples/fonts/',
              embed: ['woff'],
              collate: false
          }))
          .pipe(gulp.dest('/examples/fonts/'));
  console.log('finishes');
});

add async fo function and await for gulp

Upvotes: 0

Related Questions