Khắc phục lỗi 'Roboto-Regular.ttf' not found trong pdfMake: Hướng dẫn chi tiết

Bạn đang gặp lỗi "File 'Roboto-Regular.ttf' not found in virtual file system" khi sử dụng pdfMake? Đừng lo lắng! Bài viết này sẽ cung cấp cho bạn các giải pháp chi tiết và dễ hiểu để khắc phục vấn đề này, bất kể bạn đang sử dụng Webpack, Gulp hay CDN. Chúng tôi sẽ đi sâu vào nguyên nhân gây ra lỗi và hướng dẫn bạn từng bước để đảm bảo pdfMake hoạt động trơn tru.

Nguyên nhân gây ra lỗi 'Roboto-Regular.ttf' not found trong pdfMake

Lỗi này thường xảy ra khi pdfMake không tìm thấy font chữ Roboto-Regular.ttf trong hệ thống tệp ảo (virtual file system). Điều này có thể do một số nguyên nhân sau:

• Thiếu file vfs_fonts.js: File này chứa các font chữ mặc định mà pdfMake sử dụng.
• Thứ tự include file sai: vfs_fonts.js phải được include *sau* pdfmake.min.js.
• Vấn đề với Webpack/Gulp: Các công cụ build này có thể không copy hoặc bundle file vfs_fonts.js đúng cách.
• Cache trình duyệt: Đôi khi, cache trình duyệt có thể gây ra xung đột.

Các giải pháp khắc phục lỗi 'Roboto-Regular.ttf'

Dưới đây là các giải pháp bạn có thể thử, tùy thuộc vào cấu hình dự án của bạn:

1. Sử dụng CDN (Content Delivery Network)

Nếu bạn đang sử dụng pdfMake thông qua CDN, hãy đảm bảo bạn đã include cả pdfmake.min.js và vfs_fonts.js theo đúng thứ tự:

    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.71/pdfmake.min.js"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.71/vfs_fonts.js"></script>
    
  

**Quan trọng:** Luôn include vfs_fonts.js *sau* pdfmake.min.js.

2. Khắc phục lỗi khi sử dụng Webpack

Nếu bạn đang sử dụng Webpack, có một vài cách để đảm bảo vfs_fonts.js được bundle đúng cách:

• **Sử dụng `CopyWebpackPlugin`:** Plugin này sẽ copy các file pdfmake.min.js và vfs_fonts.js từ thư mục node_modules vào thư mục build của bạn.

          
            // webpack.config.js
  
            const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  
  
            module.exports = {
  
              // ...
  
              plugins: [
  
                new CopyWebpackPlugin({
  
                  patterns: [
  
                    { from: 'node_modules/pdfmake/build/pdfmake.min.js', to: 'pdfmake.min.js' },
  
                    { from: 'node_modules/pdfmake/build/vfs_fonts.js', to: 'vfs_fonts.js' }
  
                  ]
  
                })
  
              ]
  
            };
          
        

  Sau đó, include các file này trong HTML của bạn:

          
            <script src="/pdfmake.min.js"></script>
  
            <script src="/vfs_fonts.js"></script>
          
        

• **Import trực tiếp và gán vào window:** Đôi khi, việc import trực tiếp có thể không hoạt động. Hãy thử import và gán vào đối tượng `window`:

              
                  import pdfMake from 'pdfmake/build/pdfmake';
  
                  import pdfFonts from 'pdfmake/build/vfs_fonts';
  
  
  
                  pdfMake.vfs = pdfFonts.pdfMake.vfs; 
  
                  window.pdfMake = pdfMake; // Nếu cần thiết
              
          

3. Giải pháp cho Gulp

Tương tự như Webpack, bạn có thể sử dụng Gulp để copy file vfs_fonts.js vào thư mục build:

    
      // gulpfile.js

      const gulp = require('gulp');

      const concat = require('gulp-concat');



      gulp.task('pdfmake', () => {

        return gulp.src([

          'node_modules/pdfmake/build/pdfmake.min.js',

          'node_modules/pdfmake/build/vfs_fonts.js'

        ])

          .pipe(concat('pdfmake.bundle.js'))

          .pipe(gulp.dest('dist/js'));

      });
    
  

Sau đó, include pdfmake.bundle.js trong HTML của bạn.

4. Xóa cache trình duyệt

Đôi khi, trình duyệt có thể cache phiên bản cũ của vfs_fonts.js. Hãy thử xóa cache trình duyệt và tải lại trang.

5. Kiểm tra đường dẫn và cấu hình

Đảm bảo rằng các đường dẫn đến pdfmake.min.js và vfs_fonts.js trong HTML và cấu hình build của bạn là chính xác. Kiểm tra xem có bất kỳ lỗi chính tả hoặc sai sót nào không.

Sử dụng font chữ tùy chỉnh

Nếu bạn muốn sử dụng font chữ tùy chỉnh thay vì Roboto, bạn cần thực hiện các bước sau:

1. **Chuẩn bị font chữ:** Đặt các file font chữ của bạn (ví dụ: TTF) vào thư mục `examples/fonts` trong thư mục `node_modules/pdfmake`.
2. **Tạo `vfs_fonts.js` mới:** Chạy lệnh `node build-vfs.js "./examples/fonts"` trong thư mục `node_modules/pdfmake`. Lệnh này sẽ tạo file `vfs_fonts.js` mới chứa các font chữ của bạn.
3. **Khai báo font chữ trong code:** Sử dụng `pdfMake.addFonts()` để khai báo font chữ của bạn và chỉ định các file tương ứng cho kiểu normal, bold, italic, và bolditalic.

                   
                       pdfMake.addFonts({
                           MyCustomFont: {
                               normal: 'MyCustomFont-Regular.ttf',
                               bold: 'MyCustomFont-Bold.ttf',
                               italics: 'MyCustomFont-Italic.ttf',
                               bolditalics: 'MyCustomFont-BoldItalic.ttf'
                           }
                       });
                   
               

4. **Sử dụng font chữ trong docDefinition:** Chỉ định font chữ bạn muốn sử dụng trong `defaultStyle` của `docDefinition`.

                   
                       var docDefinition = {
                           content: [
                               { text: 'Hello, PDF!', style: 'header' }
                           ],
                           styles: {
                               header: {
                                   font: 'MyCustomFont',
                                   fontSize: 22,
                                   bold: true
                               }
                           },
                           defaultStyle: {
                               font: 'MyCustomFont'
                           }
                       };
                   
               

Kết luận

Lỗi "File 'Roboto-Regular.ttf' not found" trong pdfMake thường do thiếu file vfs_fonts.js hoặc include sai thứ tự. Bằng cách làm theo các hướng dẫn trên, bạn có thể dễ dàng khắc phục vấn đề này và tiếp tục tạo ra các file PDF chất lượng cao. Nếu bạn vẫn gặp khó khăn, hãy kiểm tra kỹ cấu hình dự án của bạn và đảm bảo rằng tất cả các file cần thiết đều được include đúng cách.