时间戳

首页 > 解决方案 > 运行 gulp 任务“buildFonts”以导出带有 HTML 图标的 PDF 时出现问题

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

问题描述

我正在使用 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- contains-your-font中描述的步骤进行操作-文件

但是，我不能让它工作。步骤“运行 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/”中放置了“fontawesome”字体，我想用它来导出 HTML 图标。

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

gulp buildFonts

它打印出来

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

这个 gulps 任务应该在新文件夹“pdfmake-0.1.36/build/”中创建一个新的“vfs_fonts.js”，但它没有创建任何东西。

标签： pdfgulptaskpdfmake

解决方案

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

推荐阅读