如何使用HTML渲染图像，使用Flutter创建CSS-iOS应用程序的CSS? [英] How to render image using HTML, CSS using flutter to create iOS-App?
问题描述
我正在尝试使用HTML和CSS来创建PDF .因此，在某些情况下，我必须使用html和css渲染资产图像.
I am trying to create the PDF using HTML, CSS in flutter. So, In some cases I have to render the asset image using html and css.
在android的情况下，它通过使用以下代码中提到的资产文件位置(例如(file:///android_asset/...))进行渲染:
It is rendering in case of android by using the asset file location like (file:///android_asset/...) mentioned in the code below:
makeProfileImage() {
return '<img src="file:///android_asset/flutter_assets/assets/image_name.jpg">';
}
如何在iOS中获取资产文件路径，例如(file:///android_asset/flutter_assets/...)?
Future<void> printPdf() async {
print('Print ...');
await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
return await Printing.convertHtml(
format: PdfPageFormat.a4
.applyMargin(left: 0, top: 0, right: 0, bottom: 0),
html: '<html><head>' +
getRatingbarCss() +
'<style>.checked {color: red;}</style>' +
'</head><body style="margin:0;padding:0" bgcolor="white">' +
makeProfileImage() +
'<h2 style="color:black;">Star Rating</h2><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star"/><span class="fa fa-star"/></body></html>');
});
}
pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
pdf: ^1.3.17
printing: ^2.0.0
flutter_full_pdf_viewer: ^1.0.4
推荐答案
当前的实现，webview插件中的FLTWebViewController和FLTWebViewFactory类无法访问注册服务商，因此我将其initWithMessenger方法更改为initWithRegistrar.现在我们有了在iOS Webview中加载资产文件的答案:
The current implementation, the FLTWebViewController and FLTWebViewFactory class in webview plugin don’t have access to registrar, so I changed their initWithMessenger method to initWithRegistrar. Now we have the answer to loading asset file in iOS webview:
NSString* key = [_registrar lookupKeyForAsset:url];
NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];
[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];
作为请求请求: https://github.com/flutter/plugins/pull/1247/文件
示例:
<html>
<head>
</head>
<body>
<img src="image_name.jpg">
</body>
</html>
然后在Flutter项目的根目录中创建一个资产文件夹:
Then create a assets folder in the root of the Flutter project :
assets:
- assets/image_name.jpg
- assets/htmlfile.html
创建WebView 下面的dart代码创建WebView并呈现本地资源/htmlfile.html文件.
Create the WebView The dart code below creates the WebView and renders the local assets/htmlfile.html file.
return WebView(
initialUrl: 'assets/htmlfile.html',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
);
这篇关于如何使用HTML渲染图像，使用Flutter创建CSS-iOS应用程序的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
