Flutter web - 显示应用程序中生成的 pdf 文件。 （Uint8List格式）

我正在开发一个 iOS/Android/Web 应用程序，我使用此处的 pdf 插件根据用户输入生成 PDF：https://pub.dev/packages/pdf https://pub.dev/packages/pdf。在 iOS 和 Android 上，我可以访问文件系统，因此我可以先保存生成的 pdf，然后使用任何 pdf 显示插件打开它。

然而，对于Flutter web，据我所知，无法访问任何类型的文件系统。我见过的所有 pdf 渲染插件都假设 pdf 文件存储在文件中或存储在网络上。 我在看：

• flutter_full_pdf_viewer：^1.0.6
• flutter_pdf_viewer：^0.6.1
• pdf_渲染：^0.57.2

如何在 flutter web 上显示此应用程序生成的 pdf？有没有办法将 Uint8List 数据欺骗为文件，或者也许有另一种方法来解决这个问题？ （我能想到的解决这个问题的唯一方法是在生成文件后将其上传到网络上以显示它，但这似乎有点过头了。）

我们不需要额外的插件就可以做到这一点，因为网络浏览器本身可以显示（或下载）pdf文档。

更新为 pdf 2.0.0 及更高版本

由于方法save https://pub.dev/documentation/pdf/latest/pdf/PdfDocument/save.html现在返回 Future，按钮处理程序变得异步（当然你可以使用未来建造者或者是其他东西）。

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

class PdfLabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final pdf = pw.Document();
    pdf.addPage(pw.Page(
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return pw.Center(
            child: pw.Text('Hello World'),
          );
        }));

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                final bytes = await pdf.save();
                final blob = html.Blob([bytes], 'application/pdf');
                final url = html.Url.createObjectUrlFromBlob(blob);
                html.window.open(url, '_blank');
                html.Url.revokeObjectUrl(url);
              },
              child: Text('Open'),
            ),
            ElevatedButton(
              onPressed: () async {
                final bytes = await pdf.save();
                final blob = html.Blob([bytes], 'application/pdf');
                final url = html.Url.createObjectUrlFromBlob(blob);
                final anchor = html.AnchorElement()
                  ..href = url
                  ..style.display = 'none'
                  ..download = 'some_name.pdf';
                html.document.body?.children.add(anchor);
                anchor.click();
                html.document.body?.children.remove(anchor);
                html.Url.revokeObjectUrl(url);
              },
              child: Text('Download'),
            ),
          ],
        ),
      ),
    );
  }
}

原答案

import 'package:flutter/material.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:universal_html/html.dart' as html;

class PdfDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final pdf = pw.Document();
    pdf.addPage(pw.Page(
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return pw.Center(
            child: pw.Text("Hello World"),
          );
        }));
    final bytes = pdf.save();
    final blob = html.Blob([bytes], 'application/pdf');

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("Open"),
              onPressed: () {
                final url = html.Url.createObjectUrlFromBlob(blob);
                html.window.open(url, "_blank");
                html.Url.revokeObjectUrl(url);
              },
            ),
            RaisedButton(
              child: Text("Download"),
              onPressed: () {
                final url = html.Url.createObjectUrlFromBlob(blob);
                final anchor =
                    html.document.createElement('a') as html.AnchorElement
                      ..href = url
                      ..style.display = 'none'
                      ..download = 'some_name.pdf';
                html.document.body.children.add(anchor);
                anchor.click();
                html.document.body.children.remove(anchor);
                html.Url.revokeObjectUrl(url);
              },
            ),
          ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
      ),
    );
  }
}