Flutter plugin webview and use javascript to print the web page, but only the javascript is not working in webview. Please kindly help to solve this issue.
Flutter code:
Future<Null> _launchInWebViewWithJavaScript(String url) async {
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: true,
forceWebView: false,
enableJavaScript: true,
);
} else {
throw 'Could not launch $url';
}
}
Webpage code (php, javascript and html):
<?php
$qrString = $_GET['qrString'];
$tableNumber = $_GET['tableNumber'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>receipt</title>
<link rel="stylesheet" href=".0.3/normalize.css">
<link rel="stylesheet" href="../paper.css">
<style>
@page { size: 75mm 100mm } /* output size */
body.receipt .sheet { width: 58mm; height: 100mm } /* sheet size */
@media print { body.receipt { width: 58mm } } /* fix for Chrome */
</style>
<script src=".11.2/jquery.min.js"></script>
</head>
<body class="receipt">
<section class="sheet padding-10mm">
<?php echo '<h1>檯號: '.$tableNumber. '</h1><br>' ?>
<img id='barcode'
src=<?php echo '/?data=' .$qrString. '&size=300x300' ?>
alt=""
title="HELLO"
width="300"
height="300" />
</section>
</body>
<script type="text/javascript">
<!--
window.print();
</script>
</html>
The webpage is working fine with browser Chrome and Safari.
Flutter plugin webview and use javascript to print the web page, but only the javascript is not working in webview. Please kindly help to solve this issue.
Flutter code:
Future<Null> _launchInWebViewWithJavaScript(String url) async {
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: true,
forceWebView: false,
enableJavaScript: true,
);
} else {
throw 'Could not launch $url';
}
}
Webpage code (php, javascript and html):
<?php
$qrString = $_GET['qrString'];
$tableNumber = $_GET['tableNumber'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>receipt</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="../paper.css">
<style>
@page { size: 75mm 100mm } /* output size */
body.receipt .sheet { width: 58mm; height: 100mm } /* sheet size */
@media print { body.receipt { width: 58mm } } /* fix for Chrome */
</style>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="receipt">
<section class="sheet padding-10mm">
<?php echo '<h1>檯號: '.$tableNumber. '</h1><br>' ?>
<img id='barcode'
src=<?php echo 'https://api.qrserver./v1/create-qr-code/?data=' .$qrString. '&size=300x300' ?>
alt=""
title="HELLO"
width="300"
height="300" />
</section>
</body>
<script type="text/javascript">
<!--
window.print();
</script>
</html>
The webpage is working fine with browser Chrome and Safari.
Share Improve this question asked Nov 4, 2018 at 10:40 GPHGPH 1,1718 gold badges32 silver badges50 bronze badges2 Answers
Reset to default 2May be too late to answer, but for my case it solved by upgrading webview from playstore. Earlier before this my webview was plaining about ES^ syntaxes like arrow function and spread operator. Aftre this it works all fine!
Use flutter_webview_plugin: Following will be route code
routes: {
"/webview": (_) => WebviewScaffold(
url: url,
appBar: AppBar(
title: Text("Webview"),
),
withJavascript: true,
withLocalStorage: true,
withZoom: true,
)
},