使用 flutter 在 webview 中显示下载的临时本地文件（png，jpg，pdf，rtf）

Question

I wants to show any type of file in webview using flutter.我想使用 flutter 在 webview 中显示任何类型的文件。

Code for the load file in webview. webview 中加载文件的代码。

class ViewFile extends StatelessWidget {
  WebViewController _controller;

  String path;

  ViewFile({this.path});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: WebView(
          initialUrl: 'about:blank',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller = webViewController;
            _loadHtmlFromAssets();
          },
        ),
      ),
    );
  }

  _loadHtmlFromAssets() async {
    print('path is $path');
    String fileText =  '''<embed src="$path" width="100%" height="100%"/>''';
    _controller.loadUrl(Uri.dataFromString(
        fileText,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());
  }
}

But it shows blank.但它显示为空白。 Although embed tag other tags works perfectly.虽然嵌入标签其他标签工作完美。

Answer 1

For the image files, you can convert it to base64 to display the image.对于图像文件，您可以将其转换为base64以显示图像。 Here I use a simple version of html for demonstration purpose:这里我使用html的简单版本进行演示：

var htmlString = '''
  <html>
    <head><title>Test WebView</title></head>
    <body>{}</body>
  </html>
''';

var image = await http.get(url); // Download the image

// Insert in the base64 String
var htmlString = htmlString.replaceFirst('{}',
          '<img src=data:image/jpeg;base64,${base64Encode(image.bodyBytes)}>');

_controller.loadUrl(
          Uri.dataFromString(htmlString, mimeType: 'text/html').toString());

For the pdf, it's best to use the package flutter_cached_pdfview that's both easy to use for local or online file.对于 pdf，最好使用 package flutter_cached_pdfview ，它既易于用于本地文件，也易于用于在线文件。 Another quick way is to use the embedded view from google docs:另一种快速方法是使用谷歌文档中的嵌入式视图：

var displayUrl = 'https://docs.google.com/gview?embedded=true&url=$url';

Full example code:完整示例代码：

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MaterialApp(home: HelpScreen()));
}

class HelpScreen extends StatefulWidget {
  @override
  HelpScreenState createState() => HelpScreenState();
}

class HelpScreenState extends State<HelpScreen> {
  WebViewController _controller;
  var pdfUrl = 'www.africau.edu/images/default/sample.pdf';
  var imageUrl =
      'https://file-examples-com.github.io/uploads/2017/10/file_example_PNG_500kB.png';

  var htmlString = '''
  <html>
  <head><title>Test WebView</title>
  </head>
  <body>
  {}
  </body>
  </html>
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Help')),
      body: WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _loadHtmlFromAssets(imageUrl);
          _loadHtmlFromAssets(pdfUrl);
        },
      ),
    );
  }

  _loadHtmlFromAssets(String url) async {
    if (url.contains('png') || url.contains('jpg')) {
      var image = await http.get(url); // Download the image
      htmlString = htmlString.replaceFirst('{}',
          '<img src=data:image/jpeg;base64,${base64Encode(image.bodyBytes)}>');
      _controller.loadUrl(
          Uri.dataFromString(htmlString, mimeType: 'text/html').toString());
    } else if (url.contains('pdf')) {
      var displayUrl = 'https://docs.google.com/gview?embedded=true&url=$url';
      _controller.loadUrl(displayUrl).toString();
    }
  }
}

使用 flutter 在 webview 中显示下载的临时本地文件（png，jpg，pdf，rtf）

问题描述

1 个解决方案

解决方案1
1 2021-03-09 05:33:55

使用 flutter 在 webview 中显示下载的临时本地文件（png，jpg，pdf，rtf）

问题描述

1 个解决方案

解决方案1 1 2021-03-09 05:33:55

解决方案1
1 2021-03-09 05:33:55