运行gulp任务“ buildFonts”以导出带有HTML图标的PDF时出现问题

时间:2019-03-25 11:19:04

标签: pdf gulp task pdfmake

我正在使用WebForms在ASP NET项目中使用JQuery Datatables(v1.10.18)。 为简洁起见,我正在尝试将表格导出为PDF。工作正常。我唯一的问题是,在某些表格中,有一些HTML图标(例如“ fa fa-check”)没有显示在PDF中。

值得一提的是我设置的

stripHtml: false,

我正在按照https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/#1-create-a-new-vfs-fonts-js-containing-your-font-files

中所述的步骤进行操作

但是,我无法使其正常工作。步骤“运行gulp buildFonts以创建新的build / vfs_fonts.js(您可以更新gulpfile.js来更改基本目录路径或为buildFonts任务添加替代配置)。”给我麻烦。

很高兴知道这是我第一次使用'gulp',因此我通过在网上以及gulp和pdfmake文档中找到的示例来指导自己

我在文件夹pdfmake-0.1.36(其中包含导出到PDF所需的pdfmake.js和vfs_fonts.js脚本的文件夹)中定义文件'gulpFile.js'。

然后,在“ gulpFile.js”中定义:

    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');
  });

在'/ examples / fonts /'中放置了我想用来导出HTML图标的'fontawesome'字体。

然后,在cmd中,我转到特定文件夹并执行

gulp buildFonts

它会打印出来

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

该大任务应该在新文件夹“ pdfmake-0.1.36 / build /”中创建一个新的“ vfs_fonts.js”,但不会创建任何内容。

1 个答案:

答案 0 :(得分:0)

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');
});

添加 async fo 函数并等待 gulp