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

Posted

技术标签:

【中文标题】如何在小部件的容器内显示 pdf [flutter-web]【英文标题】:How to display pdf inside container of widget [flutter-web] 【发布时间】:2021-02-21 02:20:36 【问题描述】:

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

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

我仍然不知道如何将它放入小部件颤动中

【问题讨论】:

请在您的问题中提供一些您已经拥有的代码。 【参考方案1】:

您可以在下面复制粘贴运行完整代码 在演示代码中,我在Container上添加了blue border 代码sn-p

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'));
  

【讨论】:

以上是关于如何在小部件的容器内显示 pdf [flutter-web]的主要内容,如果未能解决你的问题,请参考以下文章

通过 addPostFrameCallback 访问 Flutter Provider 时说小部件在小部件树之外,但颤振检查器显示其他情况

如何在 Flutter 中的行小部件内的容器上添加边框?

Flutter - 如何在小部件测试中选择 DropdownButton 项

Flutter:在小部件测试中测试异常

Flutter Container 在 Row 小部件内定位或对齐

Flutter:如何在构造函数中传递值,以便我可以重用我的小部件?