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

Question

我想在我的 flutter-web 项目中打开 pdf 文件，只要我知道...当我打开 pdf 时，它总是将我导航到新选项卡，有没有办法在容器中显示 pdf小部件颤振？所以，到目前为止，我只通过这样做打开pdf文件

html.window.open('http://xxxx.pdf',"my_pdf");

我还是不知道怎么把它放到widget flutter里面

Answer 1

您可以复制粘贴运行下面的完整代码
在演示代码中，我在 Container
上添加了 blue border 代码片段

class Iframe extends StatelessWidget {
  Iframe() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('iframe', (int viewId) {
      var iframe = html.IFrameElement();
      iframe.src = 'http://www.africau.edu/images/default/sample.pdf';
      return iframe;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
        width: 400,
        height: 300,
        child: HtmlElementView(viewType: 'iframe'));
  }
}

工作演示

完整代码

import 'package:flutter/material.dart';
// import 'dart:io' if (dart.library.html) 'dart:ui' as ui;
import 'dart:ui' as ui;
import 'dart:html' as html;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Iframe()),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class Iframe extends StatelessWidget {
  Iframe() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('iframe', (int viewId) {
      var iframe = html.IFrameElement();
      iframe.src = 'http://www.africau.edu/images/default/sample.pdf';
      return iframe;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
        width: 400,
        height: 300,
        child: HtmlElementView(viewType: 'iframe'));
  }
}

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

How to display pdf inside container of widget [flutter-web]

pdf

flutter

flutter-web