Flutter PDF渲染插件pdfjs的使用

pdfjs_dart

Dart绑定Mozilla的PDF.js库

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  pdfjs: ^0.5.0

然后运行flutter pub get来获取依赖。

使用示例

首先，我们需要初始化PDF.js库，并加载PDF文件。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:pdfjs/pdfjs.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PdfViewerPage(),
    );
  }
}

class PdfViewerPage extends StatefulWidget {
  [@override](/user/override)
  _PdfViewerPageState createState() => _PdfViewerPageState();
}

class _PdfViewerPageState extends State<PdfViewerPage> {
  final String pdfUrl = "https://www.example.com/sample.pdf"; // 替换为你的PDF文件URL
  DocumentLoader documentLoader;

  [@override](/user/override)
  void initState() {
    super.initState();
    documentLoader = DocumentLoader(pdfUrl);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PDF Viewer"),
      ),
      body: Center(
        child: FutureBuilder<Document>(
          future: documentLoader.loadDocument(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final pagesCount = snapshot.data.numPages;
              return ListView.builder(
                itemCount: pagesCount,
                itemBuilder: (context, index) {
                  return FutureBuilder<Page>(
                    future: snapshot.data.getPage(index + 1),
                    builder: (context, pageSnapshot) {
                      if (pageSnapshot.hasData) {
                        return Container(
                          height: 600,
                          child: CustomPaint(
                            painter: PdfPainter(pageSnapshot.data),
                          ),
                        );
                      } else if (pageSnapshot.hasError) {
                        return Text("Error loading page ${index + 1}");
                      } else {
                        return CircularProgressIndicator();
                      }
                    },
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text("Error loading document");
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

class PdfPainter extends CustomPainter {
  final Page page;

  PdfPainter(this.page);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    page.render(
      canvas: canvas,
      viewportSize: size,
      scale: 1.0,
    );
  }

  [@override](/user/override)
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

更多关于Flutter PDF渲染插件pdfjs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼•3 天前

更多关于Flutter PDF渲染插件pdfjs的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，pdfjs 并不是一个广泛认知的官方或主流 PDF 渲染插件。通常，开发者会使用如 pdf_viewer_plugin 或 flutter_full_pdf_viewer 这样的插件来渲染 PDF 文件。不过，如果你特别想使用基于 pdf.js 的解决方案，可以通过 webview_flutter 插件结合 pdf.js 来实现。

以下是一个使用 webview_flutter 和 pdf.js 来渲染 PDF 的示例代码：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 webview_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.10  # 请检查最新版本号

2. 创建一个 Webview 容器

在你的 Flutter 项目中创建一个新的 Dart 文件（例如 pdf_viewer.dart），并添加以下代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:convert';

class PDFViewer extends StatefulWidget {
  final String pdfUrl;

  PDFViewer({required this.pdfUrl});

  @override
  _PDFViewerState createState() => _PDFViewerState();
}

class _PDFViewerState extends State<PDFViewer> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PDF Viewer'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          _createPdfJsHtml(widget.pdfUrl),
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.UNRESTRICTED,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }

  String _createPdfJsHtml(String pdfUrl) {
    // pdf.js CDN URL (你可以替换为本地文件或其他CDN)
    final pdfJsCDN = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js";
    
    return """
      <!DOCTYPE html>
      <html>
      <head>
        <title>PDF Viewer</title>
      </head>
      <body>
        <canvas id="pdfCanvas"></canvas>
        <script src="$pdfJsCDN"></script>
        <script>
          const pdfUrl = '$pdfUrl';
          const pdfCanvas = document.getElementById('pdfCanvas');
          const pdfContext = pdfCanvas.getContext('2d');

          pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
            pdf.getPage(1).then(function(page) {
              const viewport = page.getViewport({ scale: 1.5 });
              pdfCanvas.height = viewport.height;
              pdfCanvas.width = viewport.width;

              const renderContext = {
                canvasContext: pdfContext,
                viewport: viewport
              };
              page.render(renderContext);
            });
          });
        </script>
      </body>
      </html>
    """;
  }
}

3. 使用 PDFViewer 组件

在你的主应用文件中（例如 main.dart），使用 PDFViewer 组件：

import 'package:flutter/material.dart';
import 'pdf_viewer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter PDF Viewer'),
        ),
        body: PDFViewer(pdfUrl: 'https://www.example.com/sample.pdf'),
      ),
    );
  }
}

注意事项

跨域问题：如果你的 PDF 文件存储在某个服务器上，可能会遇到跨域资源共享（CORS）问题。确保服务器配置允许跨域请求。
性能：使用 webview_flutter 和 pdf.js 渲染大型 PDF 文件时，可能会遇到性能问题。对于大型或复杂的 PDF 文件，考虑使用原生解决方案或优化 pdf.js 的配置。
安全性：确保从可信来源加载 PDF 文件，避免加载恶意 PDF 导致的安全风险。

这个示例展示了如何在 Flutter 中使用 webview_flutter 和 pdf.js 来渲染 PDF 文件。根据你的需求，你可能需要进一步调整或扩展这个示例。