时间戳

首页 > 解决方案 > pdf 1.8.1 Flutter - 无法显示文档

flutter - pdf 1.8.1 Flutter - 无法显示文档

问题描述

我正在尝试使用此处的包为 Flutter 使用 PDF 库

这个想法是创建这样的东西：这是包页面中的示例。

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

但是，如果我创建一个新项目并复制/粘贴所有 *.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,
        ),
      ),
    );
  }
}

标签： flutterpdfdart

解决方案

你添加了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>

推荐阅读