Sending a webview Page to a Printer

[ghost]

Does anyone have a full example of sending a Webview page to a Printer ?
I am tying myself in knots with this...

[zoechi]

have you tried evalJavaScript('print();'); - just a wild guess

[ghost]

not yet....

[ghost]

I am at the point where I need to load an SPA app in.

The spa has a index.html with a few resources it loads.

In my case I store all the pages and resources in a dB with a jsonrpc Api to it running as a flutter plugin.
This allows me to store the app locally and upgrade it by synchronising the database between the clients and the server.

So if the only way of getting the index.html inside the webview am I going to have to suck the file out of my dB and eval it into the webview ? Was kind of hoping there would be a more elegant way :)

[zoechi]

You don't need eval to load a page from some local storage #23
I meant just to execute the print(); command after the page is loaded to invoke printing.

[ghost]

@zoechi Ah i think i get it. Let see

So i have an SPA, and pages of the SPA. If you looked at the man page its got url calls like:

<link as="script" href="/awesomeicons/_nuxt/manifest.52d743c1abd9eb763522.js" rel="preload"
<link as="script" href="/awesomeicons/_nuxt/vendor.bundle.67255c6b8df9d11c1886.js" rel="preload">
<link as="script" href="/awesomeicons/_nuxt/nuxt.bundle.3f1a09e48fb2ecac6753.js" rel="preload">
<link as="script" href="/awesomeicons/_nuxt/1.nuxt.bundle.c7475ddda41604ca49d7.js" rel="preload">
<link as="script" href="/awesomeicons/_nuxt/0.nuxt.bundle.a0eab06eb31666ee3dc7.js" rel="preload">

Basically i have to run a web server in dart and somehow get calls to _nuxt to hit the webserver ?

[zoechi]

yup, you load webview with an url that points to that web server built-in in your app

[ghost]

@zoechi thanks - super awesome patience in helping me.

I guess i can run the dart webserver as a true webserver with a localhost:8080.
Then just change the web code to use that localhost:8080 ?
Feels wrong since its much more IO, but thats life sometimes.

the alternative is to use file based URLs: file:///blah blah, but not sure if that will work.

[zoechi]

I don't know about the file approach either.
I guess it won't be easy with assets.
If you write it to the storage from the app it should work.
Implementing such an HTTP server that listens on localhost:xxxx is pretty easy with Dart.
It's a bit hacky but I guess there will become better ways available eventually.

[ghost]

ok will go for the localhost: xxx for now to get moving. If i get it working will publish on git hub for others

…

On Fri, 22 Jun 2018 at 10:41 Günter Zöchbauer ***@***.***> wrote: I don't know about the file approach either. I guess it won't be easy with assets. If you write it to the storage from the app it should work. Implementing such an HTTP server that listens on localhost:xxxx is pretty easy with Dart. It's a bit hacky but I guess there will become better ways available eventually. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#103 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATuCwj8nS3mcqD2aV647DzlPF8sBmoewks5t_K3MgaJpZM4Uu1RI> .

[zoechi]

@gedw99 did you see this link https://medium.com/@segaud.kevin/facebook-oauth-login-flow-with-flutter-9adb717c9f2e in #23?

[ghost]

Read it. It's a bit too high level but I get how to do it now. The jageur dart code base looks like a good fit for the web server. Prefer to use a sturdy lib.. I am also doing the db using badgerdb with a jsonrpc in front running locally compiled with gomobile. So in the web server dart code you can write handlers to get data. Writing offline sync versioning on top of badgerdb now. The client and server just use a grpc interface that describe data sync semantics is a way that is independent of the database structure. Aka. Buckets of buckets. Stick NATS on the server and subs riptions with inboxes and your rocking. Still more to do.

…

On Fri, 22 Jun 2018, 11:25 Günter Zöchbauer, ***@***.***> wrote: @gedw99 <https://github.com/gedw99> did you see this link ***@***.***/facebook-oauth-login-flow-with-flutter-9adb717c9f2e in #23 <#23>? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#103 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATuCwtrOytumTwFxNG1__Iq97_JbRYv7ks5t_Lf-gaJpZM4Uu1RI> .

[ghost]

Am closing. Sorry about bring to much into this issue but I get how to solve this now.
Thank you for helping me.

[ZheruiL]

I've just done the same thing as you wanted to do, here's the solution:

1. install package printing (https://pub.dev/packages/printing)
2. add a function for the webview on page finished:
3. get the html of the current page
4. use printing to transform html to pdf depend on the size of the page
5. transform pdf to png and print as image

here's the example codes:

onPageFinished: (url) {
  // detect if the page is the page you want to print
  if (url.contains('tpl/print')) {
    printPage();
  }
}

void printPage() async {
  // get the html from the current page
  String html = await _controller.runJavascriptReturningResult(
      "encodeURIComponent(document.documentElement.outerHTML)");
  html = Uri.decodeComponent(html);
  // there would be `"` at the beginning and the end, so remove it
  html = html.substring(1, html.length - 1);
  if (kDebugMode) {
    print(html);
  }

  // get the pdf of the html
  final pdf = await Printing.convertHtml(
    format: const PdfPageFormat(
      100 * PdfPageFormat.mm,
      50 * PdfPageFormat.mm,
      // marginLeft: 5 * PdfPageFormat.mm,
      // marginRight: 5 * PdfPageFormat.mm,
    ),
    html: htmlStr,
  );
  // the dpi is the resolution of the pdf, it's important if the page size is small, otherwise you can ignore it
  const dpi = 288.0;
  
  // transform pdf to image so you can print it directly
  await for (var page in Printing.raster(pdf, dpi: dpi)) {
    final imgData = await page.toPng();
    // personally I'm using sunmi printer, you'll need to change to your personnel function
    await SunmiPrinter.printImage(Uint8List.fromList(imgData));
  }
}

note: you may also install image(https://pub.dev/packages/image) for cropping or resizing images.