PDFMAKE：虛擬文件系統中找不到的'Roboto-Regular.ttf'GOULP

Question

我創建了一個簡單的應用程序，使用基於knockout/bootstrap/gulp的下載pdf的pdfMake.js。它在使用VS2017的調試模式下工作正常。出版和使用一飲而盡後，它給了運行時此錯誤：文件「的Roboto-Regular.ttf」不是虛擬的文件系統中找到

注：一飲而盡後，所有的JS文件是在一個文件的script.js。

我嘗試了很多東西，它總是在調試時工作，只要我運行gulp，它會給出錯誤。

我試圖joepal1976的解決方案從here（我做了什麼，在require.config.js的依賴性）

有人建議.pipe（醜化（{ 壓縮：{ hoist_funs：假 } }））這似乎沒有幫助。

包括在require.config像這樣：該頁面

var require = { 
    baseUrl: ".", 
    paths: { 
     "jquery":    "js-libs/jquery.min", 
     "bootstrap":   "js-libs/bootstrap.min", 
     "crossroads":   "js-libs/crossroads.min", 
     "hasher":    "js-libs/hasher.min", 
     "knockout":    "js-libs/knockout", 
     "knockout-projections": "js-libs/knockout-projections.min", 
     "signals":    "js-libs/signals.min", 
     "text":     "js-libs/text", 
     "vfs_fonts":   "js-libs/vfs_fonts", 
     "pdfMake":    "js-libs/pdfmake.min" 
    }, 
    shim: { 
     "bootstrap": { deps: ["jquery"] }, 
     'pdfMake': 
     { 
      exports: 'vfs_fonts' 
     }, 
     'vfs_fonts': 
     { 
      deps: ['pdfMake'], 
      exports: 'vfs_fonts' 
     } 
    } 
}; 

JS：

define(["knockout", "text!./home.html"], function (ko, homeTemplate) { 
function HomeViewModel(route) { 
    var thisVM = this; 


    this.VMInit = function() { 

     var thePDF = { 
      content: [ 
       'My test invoice.', 
      ] 
     }; 

     pdfMake.createPdf(thePDF).download('pdf_test.pdf'); 

    } 

    thisVM.VMInit(); 
} 
return { viewModel: HomeViewModel, template: homeTemplate }; 

}); 

的咕嘟咕嘟文件：

//----------------------------------------------------------------------- 
// Node modules 
var fs  = require('fs'), 
vm  = require('vm'), 
merge = require('deeply'), 
chalk = require('chalk'), 
es  = require('event-stream'); 

//----------------------------------------------------------------------- 
// Gulp and plugins 
var gulp  = require('gulp'), 
rjs   = require('gulp-requirejs-bundler'), 
concat  = require('gulp-concat'), 
clean  = require('gulp-clean'), 
replace  = require('gulp-replace'), 
uglify  = require('gulp-uglify'), 
htmlreplace = require('gulp-html-replace'); 

// Config 
var requireJsRuntimeConfig = 
vm.runInNewContext(fs.readFileSync('src/app/require.config.js') + '; require;'); 
requireJsOptimizerConfig = merge(requireJsRuntimeConfig, { 
    out: 'scripts.js', 
    baseUrl: './src', 
    name: 'app/startup', 
    paths: { 
     requireLib: 'js-libs/require' 
    }, 
    include: [ 
     'requireLib', 
     'components/nav-bar/nav-bar', 
     'components/home-page/home', 
     'text!components/about-page/about.html' 
    ], 
    insertRequire: ['app/startup'], 
    bundles: { 
     // If you want parts of the site to load on demand, remove them from the 'include' list 
     // above, and group them into bundles here. 
     // 'bundle-name': [ 'some/module', 'another/module' ], 
     // 'another-bundle-name': [ 'yet-another-module' ] 
    } 
}); 

//----------------------------------------------------------------------- 
// Discovers all AMD dependencies, concatenates together all required .js 
files, minifies them 
gulp.task('js', function() { 
    return rjs(requireJsOptimizerConfig) 
     .pipe(replace('Views/src/', '')) 
     .pipe(replace('img/', 'Assets/img/')) 
     .pipe(replace('css/', 'Assets/css/')) 
     .pipe(uglify({ 
      preserveComments: 'some' 
     })) 
     .pipe(gulp.dest('./dist-app/Assets/js/')); 
}); 


gulp.task('css', function() { 
return gulp.src(['./src/css/bootstrap.css', 
       './src/css/bootstrap-switch.css', 
       './src/css/dataTables.bootstrap.css', 
       './src/css/dataTables.colVis.css', 
       './src/css/dataTables.responsive.css', 
       './src/css/daterangePicker.css']) 
    .pipe(concat('styles.css')) 
    .pipe(gulp.dest('./dist-app/Assets/css/')); 
}); 


// Copies index.html, replacing <script> and <link> tags to reference production 
URLs 
gulp.task('html', function() { 
return gulp.src('./src/index.html') 
    .pipe(htmlreplace({ 
     dependencies_top: '<link href="Assets/css/styles.css" 
rel="stylesheet">', 
     dependencies_bottom: '<script src="Assets/js/scripts.js"></script>' 
    })) 
    .pipe(gulp.dest('./dist-app/')); 
}); 



// Removes all files from ./dist/ 
gulp.task('clean', function() { 
console.log("the clean task"); 
return gulp.src('./dist-app/**/*', { read: false }) 
    .pipe(clean()); 
}); 

// All tasks in [] must complete before 'default' can begin 
gulp.task('default', ['html', 'js', 'css'], function (callback) { 
callback(); 
console.log('\nPlaced optimized files in ' + chalk.magenta('dist-app/\n')); 
}); 

的Startup.js文件，如果它有幫助：

define(['jquery', 
    'knockout', 
    './router', 
    'bootstrap', 
    'knockout-projections', 
    'pdfMake', 
    'vfs_fonts'], function ($, ko, router) { 

// Components can be packaged as AMD modules, such as the following: 
ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' }); 
ko.components.register('home-page', { require: 'components/home-page/home' 
}); 

// ... or for template-only components, you can just point to a .html file 
directly: 
ko.components.register('about-page', { 
template: { require: 'text!components/about-page/about.html' } 
}); 

ko.components.register('new-page', { require: 'components/new-page/new-page' 
}); 

// [Scaffolded component registrations will be inserted here. To retain this 
//feature, don't remove this comment.] 

// Start the application 
ko.applyBindings({ route: router.currentRoute }); 
}); 

Answer 1

我碰到這個問題，並通過包括vfs_fonts.js只是pdfmake JavaScript文件後解決它。

這是我的代碼，你應該只需要將文件路徑設置到你的文件副本的任何位置。

<script src="~/Content/DataTables/pdfmake-0.1.32/pdfmake.min.js"></script> 
<script src="~/Content/DataTables/pdfmake-0.1.32/vfs_fonts.js"></script>