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.
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">';
}
How to get asset file path like (file:///android_asset/flutter_assets/...) in iOS?
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
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:///"]];
as pull request: https://github.com/flutter/plugins/pull/1247/files
Example :
<html>
<head>
</head>
<body>
<img src="image_name.jpg">
</body>
</html>
Then create a assets folder in the root of the Flutter project :
assets:
- assets/image_name.jpg
- assets/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);
},
);
Loading Local Assets in WebView in Flutter
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With