如何使用HTML渲染图像,使用Flutter创建CSS来创建iOS-App?

jaz*_*bpn 6 html assets image ios flutter

我正在尝试使用flutter中的HTML和CSS创建PDF。因此,在某些情况下,我必须使用html和css渲染资产图像。

在android的情况下,它通过使用以下代码中提到的资产文件位置(例如(file:/// android_asset / ...))进行渲染:

makeProfileImage() {
  return '<img src="file:///android_asset/flutter_assets/assets/image_name.jpg">';
}
Run Code Online (Sandbox Code Playgroud)

如何在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>');
  });
}
Run Code Online (Sandbox Code Playgroud)

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  pdf: ^1.3.17
  printing: ^2.0.0
  flutter_full_pdf_viewer: ^1.0.4
Run Code Online (Sandbox Code Playgroud)

You*_*lid 3

当前的实现,webview插件中的FLTWebViewController和FLTWebViewFactory类don\xe2\x80\x99t可以访问注册器,所以我将它们的initWithMessenger方法更改为initWithRegistrar。现在我们有了在 iOS webview 中加载资源文件的答案:

\n\n
NSString* key = [_registrar lookupKeyForAsset:url];\nNSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];\n[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];\n
Run Code Online (Sandbox Code Playgroud)\n\n

作为拉取请求: https: //github.com/flutter/plugins/pull/1247/files

\n\n

例子 :

\n\n
<html>\n <head>\n </head>\n <body>\n    <img src="image_name.jpg">\n </body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后在Flutter项目的根目录中创建一个assets文件夹:

\n\n
assets:\n  - assets/image_name.jpg\n  - assets/htmlfile.html\n
Run Code Online (Sandbox Code Playgroud)\n\n

创建 WebView\n下面的 dart 代码创建 WebView 并呈现本地 asset/htmlfile.html 文件。

\n\n
  return WebView(\n          initialUrl: \'assets/htmlfile.html\',\n          javascriptMode: JavascriptMode.unrestricted,\n          onWebViewCreated: (WebViewController webViewController) {\n            _controller.complete(webViewController);\n          },\n        );\n
Run Code Online (Sandbox Code Playgroud)\n\n

在 Flutter 中加载 WebView 中的本地资源

\n