Flutter 解决：仅在 Firebase 托管上出现“偏移超出 DataView 范围”错误

Question

代码保存文件：

   on<GeneratePDFFromInvoice>((event, emit) async {
      final aspHeaderLogo =
          await rootBundle.loadString('assets/images/asp_logo.svg');
      final aspFooterSlogan =
          await rootBundle.loadString('assets/images/asp_slogan.svg');
      final fontBold = Font.ttf(
          await rootBundle.load('fonts/Mulish/static/Mulish-Regular.ttf'));
      final regFont = Font.ttf(
          await rootBundle.load('fonts/Mulish/static/Mulish-Bold.ttf'));

      final pw.Document pdf =
          pw.Document(theme: PDFTheme(fontBold, regFont).themeData());

      PDF(
              pdf: pdf,
              invoice: event.invoice,
              aspHeaderLogo: aspHeaderLogo,
              aspFooterSlogan: aspFooterSlogan)
          .createPDF();
      String fileName =
          '${event.invoice.projectNumber}-${event.invoice.invoiceNumber} Invoice.pdf';
      final Uint8List fileData = await pdf.save();
      const String mimeType = 'application/pdf';
      final XFile pdfFile =
          XFile.fromData(fileData, mimeType: mimeType, name: fileName);
      await pdfFile.saveTo(fileName);
    });

浏览器控制台的错误是：

Uncaught RangeError: Offset is outside the bounds of the DataView
    at DataView.getUint32 (<anonymous>)
    at atE.a5A (main.dart.js:92807:5)
    at Object.aJI (main.dart.js:25128:3)
    at HD.U4 (main.dart.js:94596:28)
    at HD.py (main.dart.js:94570:37)
    at anw.$3 (main.dart.js:95329:97)
    at q_.atL (main.dart.js:95196:7)
    at Wp.agb (main.dart.js:95253:8)
    at Wp.cm (main.dart.js:95279:22)
    at Oj.cm (main.dart.js:94447:16)

无论我使用哪个浏览器，都会发生该错误，但仅在部署 Firebase 时才会发生。本地主机上没有错误。当我不将字体加载到 PDF 中时，似乎不会发生该错误。还使用下面的 pdf_package 链接。 https://pub.dev/packages/pdf

Answer 1

发生错误的原因是代码中的目录引用不是资产的完整目录路径，建议对rootBundle.load()执行此操作。

所以为了解决这个问题，我只是指定了完整路径，如下所示：

final fontBold = Font.ttf(await rootBundle.load('assets/fonts/Mulish/static/Mulish-Bold.ttf'));

final regFont = Font.ttf(await rootBundle.load('assets/fonts/Mulish/static/Mulish-Regular.ttf'));