如何在Flutter中通过WebView下载/创建pdf [英] how to download/create pdf through webview in flutter
问题描述
我创建了一个webview脚手架,但是在从webview浏览时无法下载任何内容,但是当我单击按钮时它什么也没做。我不知道从哪里开始,就像其他可以下载和预览的浏览器一样,我正在尝试在这里实现相同的目标。
I have created a webviewscaffold but can't download anything from it while browsing from the webview, I made but when I click the button it does nothing. I don't know where to start, like in other browsers that can download and preview, I'm trying to achieve the same thing in here.
class AppState extends State<App> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Align(
alignment: Alignment(1, 1),
child: Container(
child: Web(), // it is a statefulwidget that have WebviewScaffold, i have created it on a new page and imported/used here
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20.0),
)
],
),
Align(
alignment: Alignment(0.7, -0.93),
child: FloatingActionButton(
tooltip: "Share",
child: Icon(
Icons.share,
color: Colors.amberAccent,
),
onPressed: () {
_onShareTap();
}),
),
],
),
);
}
我希望,当我单击Web视图中的打印或下载按钮时,
I expect, when I click the print or download button within the webview it should work like any other browser.
推荐答案
您可以使用我的插件 flutter_inappwebview ,这是Flutter插件,可让您添加内联WebView或打开应用内浏览器窗口,并具有许多事件,方法和选项来控制WebView
You can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.
要能够识别可下载文件,您需要设置 useOnDownloadStart:true
选项,然后您需要可以收听 onDownloadStart
事件!
To be able to recognize downloadable files, you need to set the useOnDownloadStart: true
option, and then you can listen the onDownloadStart
event!
此外,例如,在Android上,您需要在 AndroidManifest.xml
文件:
Also, for example, on Android you need to add write permission inside your AndroidManifest.xml
file:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
然后,您需要使用 permission_handler 插件。相反,要有效下载文件,可以使用 flutter_downloader 插件。
Then, you need to ask permission using the permission_handler plugin. Instead, to effectively download your file, you can use the flutter_downloader plugin.
以下是使用 http://ovh.net/files/(尤其是 http://ovh.net/files/1Mio.dat URL)以测试下载:
Here is a complete example using http://ovh.net/files/ (in particular, the http://ovh.net/files/1Mio.dat as URL) to test the download:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_downloader/flutter_downloader.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await FlutterDownloader.initialize(
debug: true // optional: set false to disable printing logs to console
);
await Permission.storage.request();
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
InAppWebViewController webView;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('InAppWebView Example'),
),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl: "http://ovh.net/files/1Mio.dat",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
useOnDownloadStart: true
),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
},
onLoadStop: (InAppWebViewController controller, String url) {
},
onDownloadStart: (controller, url) async {
print("onDownloadStart $url");
final taskId = await FlutterDownloader.enqueue(
url: url,
savedDir: (await getExternalStorageDirectory()).path,
showNotification: true, // show download progress in status bar (for Android)
openFileFromNotification: true, // click on notification to open downloaded file (for Android)
);
},
))
])),
),
);
}
}
在这里,如您所见,我正在使用还有 path_provider 插件来获取我要保存文件的文件夹。
Here, as you can see, I'm using also the path_provider plugin to get the folder where I want to save the file.
这篇关于如何在Flutter中通过WebView下载/创建pdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!