pdf 1.8.1 Flutter - 无法显示文档

Posted

技术标签:

【中文标题】pdf 1.8.1 Flutter - 无法显示文档【英文标题】:pdf 1.8.1 Flutter - Unable to display the document 【发布时间】: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,
        ),
      ),
    );
  

【问题讨论】:

【参考方案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 中的额外代码哈哈。 我发现我不见了: 你知道我是否可以将此代码用于商业用途吗?

以上是关于pdf 1.8.1 Flutter - 无法显示文档的主要内容,如果未能解决你的问题,请参考以下文章

如何在小部件的容器内显示 pdf [flutter-web]

在 Flutter App 中显示 PDF 或 PPT 文件

在flutter中与api分开显示pdf和图像的列表

在创建 pdf 时,图像未在 Flutter 中显示

Flutter -PDF -- 错误 - 这个小部件创建了 20 多个页面。这可能是小部件或文档中的问题

vue-pdf使用