pdf 1.8.1 Flutter - 无法显示文档答案

【问题标题】：pdf 1.8.1 Flutter - Unable to display the documentpdf 1.8.1 Flutter - 无法显示文档
【发布时间】：2020-09-13 21:15:54
【问题描述】：

我正在尝试使用 here 包为 Flutter 使用 PDF 库

这个想法是创建类似this: 的东西，这是包页面中的示例。

问题是，如果我在那里运行 Demo 示例，它的工作原理与示例完全相同，这很好。

demo example

但是如果我创建一个新项目并复制/粘贴所有 *.dart 文件和 pubspec.yaml ：它不起作用。脚本创建文件，我也可以下载或打印，但不显示文件。

我没有使用包含更多信息的项目，我只是将相同的代码复制到一个干净的项目中，并且我还在 pubspec.yaml 中获取包

有人有同样的问题吗？我将在下面发布一张图片。

另外：我将这两个项目都运行为 FLUTTER WEB，在 Chrome 中

谢谢你的帮助！！ :)

在显示相同错误的“hello world”代码下方..

import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:flutter/material.dart';
import 'package:printing/printing.dart';
import 'dart:typed_data';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final pw.Document doc = pw.Document();

  @override
  Widget build(BuildContext context) {
    Future<Uint8List> generateDocument(PdfPageFormat format) async {
      doc.addPage(pw.Page(
          pageFormat: PdfPageFormat.standard,
          build: (pw.Context context) {
            return pw.Center(
              child: pw.Text("Hello World"),
            ); // Center
          })); // Page
      return doc.save();
    }

    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: PdfPreview(
          maxPageWidth: 700,
          build: generateDocument,
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter pdf dart

【解决方案1】：

我无法对回复发表评论，因此请添加我的评论作为答案。我花了一整天的时间在这个问题上，直到我发现了这个。这解决了问题，并且没有在任何地方记录。这应该被添加到这个库的 git repo 中。

Matias 因此，这可以用于商业用途。

【讨论】：

【解决方案2】：

您是否添加了 javascript 代码？您应该在 index.html 中添加代码。

例如）像这样，

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Rakuraku Flutter.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="rakuraku">
  <link rel="apple-touch-icon" href="/icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="/favicon.png"/>

  <title>rakuraku</title>
  <link rel="manifest" href="/manifest.json">
</head>
<body id="flutter">
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/flutter_service_worker.js');
      });
    }
  </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.min.js"></script>
  <script type="text/javascript">
     pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js";
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

【讨论】：

非常感谢您！你怎么知道的？我已经检查了所有文档，并没有说明 index.html 中的额外代码哈哈。
我发现我不见了：你知道我是否可以将此代码用于商业用途吗？