使用flutter在webview中显示下载的临时本地文件(png、jpg、pdf、rtf)
使用flutter在webview中显示下载的临时本地文件(png、jpg、pdf、rtf)
提问于 2021-03-08 16:15:09
我想在webview中使用flutter显示任何类型的文件。
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());
}
}但它显示为空白。尽管embed标签和其他标签工作得很好。
回答 1
Stack Overflow用户
发布于 2021-03-09 13:33:56
对于图像文件，您可以将其转换为base64以显示图像。这里我使用一个简单版本的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());对于pdf，最好使用易于本地或在线文件使用的flutter_cached_pdfview包。另一种快速方法是使用google docs中的嵌入式视图：
var displayUrl = 'https://docs.google.com/gview?embedded=true&url=$url';完整示例代码：
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();
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66526306
复制相关文章
相似问题
腾讯云开发者
