如何在不使用富文本重写的情况下将 Microsoft Word 文件内容嵌入到 Flutter 应用程序中

Question

我正在为 Android 和 IOS 开发一个 Flutter 应用程序，我想嵌入 Microsoft word 文件的内容.docx或.doc由客户端提供的内容，以便在应用程序的关于屏幕中查看。

该文件很长，我无法使用Rich text widget重写它。该文件很简单，没有图像。

我做了一些研究，发现了一些关于将文件转换为 pdf 并嵌入 pdf 视图的解决方案。我也不喜欢它，因为内容不会作为应用程序的一部分显示，页面分隔符仍然存在。

Answer 1

经过长时间的研究，我发现了flutter_widget_from_html包，这是一个了不起的包，可以将您的简单HTML转换为 flutter 小部件，并让您可以选择将其用作web 视图或仅用于呈现静态 Html。

我们现在需要将此包添加到pubspec.yaml，请始终设置最新版本

dependencies:
  flutter_widget_from_html: ^0.3.2+1

现在的挑战是将word文档转换为简单的HTML无js或外部css文件

我设法找到了免费网站https://wordhtml.com/，它允许您将 word 文件内容粘贴到其编辑器中，它会将其直接转换为HTML

最后一步是从HTML选项卡复制内容并将其插入小部件

const kHtml = """
<h1>Heading</h1>
<p>A paragraph with <strong>strong</strong> <em>emphasized</em> text.</p>
<ol>
  <li>List item number one</li>
  <li>
    Two
    <ul>
      <li>2.1 (nested)</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>Three</li>
</ol>
<p>Thank you</p>
""";

class HelloWorldScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('HelloWorldScreen'),
        ),
        body: HtmlWidget(
          kHtml,
          webView: false,
        ),
      );
}

就我而言，我希望内容可以滚动，所以我用列表视图包围了 HtmlWidget

class HelloWorldScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('HelloWorldScreen'),
        ),
        body: ListView(
          shrinkWrap: true,
          children: <Widget>[
            HtmlWidget(
                kHtml,
              ),
          ],
        )
      );
}