Monacaで作成したアプリで、
画面に表示された内容をそのまま印刷したいと考えています。
画面キャプチャの印刷だと、
画面に表示しきれていない隠れている部分の印刷ができないので、
例えば、ウェブページを印刷するときのように全て印刷できるようにしたいです。
①できれば、ボタン一つで、「プリント」を押したときと同じ挙動をするようにしたいです。
ブラウザ(Safari)で、アクションボタンクリックして、「プリント」を選んで印刷できるみたいに、
Monacaアプリでも、アクションボタンみたいなボタンを出して「プリント」を選べるような方法はあるのでしょうか?
②表示した画面を特に加工することなく、印刷したいだけなので、
画面のhtmlコードをブラウザ(Safari)に飛ばして表示することはできないものか?とも考えています。
(あまり現実的ではないような気がしますが…)
そうなれば、あとはブラウザのアクションボタンを利用して印刷すればいいのかな、とも思ったのですが、
htmlファイルをブラウザに渡すのはできないのかなと。
MonacaはWEBページではないしな、と思いつつも、以下のような感じで検証しました。
<!-- html ソースに--> <a href onclick="urlclick()">ブラウザで開くテストA</a> <a href url="pages/testpage.html" target="_blank">ブラウザで開くテストB</a>
//JavaScriptに function urlclick(){ window.open = cordova.InAppBrowser.open; window.open("pages/testpage.html", "_system", 'location=yes'); }
当然ながら、どちらのリンクをクリックしても、何も動作しません。
表示するページ「testpage.html」は、今は検証中のためスクリプトを一切使っていないただのhtmlページですが、
開発するときには、抽出データを表示したりする予定です。
何か、いい方法はないでしょうか?
補足情報
作成したアプリは、iPad miniで動かします。
プリンタの機種は未定ですが、AirPrint対応、Wi-Fi接続可能なものとしています。
既に確認している内容(追記)
※質問事項に、現在確認できている内容について記載していませんでしたので、追記します。
「cordova-plugin-printer」プラグインを使い、印刷するところまでは、確認できています。
しかしながら、期待している結果になってはいません。(表示された画面の一部しか印刷されない)
緑枠が印刷される範囲(画面に表示されている範囲)、赤枠が印刷したい範囲です↓
このような感じで、画面の表示部分のみが印刷対象となり、さらに用紙サイズで分割されてしまいます。
表示されていない部分は印刷されません。
ボタンクリックイベントの処理のJSは以下の通りです。
var options = { name:"●●システム印刷画面", //印刷物のタイトル monochrome:true, //モノクロ印刷にする margin:{top:'10px',left:'10px', right:'10px',bottom:'10px'}, //余白 orientation: 'portrait', //印刷の向き autoFit: true, // 自動調整 paper:{name:'IsoA4'} //用紙サイズA4 }; cordova.plugins.printer.print("", options); //ダブルクォート部分はコンテンツ。指定がなければビューの内容。
コンテンツのサイズを指定してみたりも(maxHeight/maxWidth)しましたが、現象としては変わりません(見えてる範囲だけ印刷される)
Safari等のブラウザで印刷するときは、画面に表示しきれていない隠れた部分も印刷されるので、
このアプリでも、隠れた部分も全て印刷できるようにしたいです。
※「ブラウザ印刷と同じように」にこだわったのは、隠れた部分を含めて全て印刷したかったためです。
なお、デバッガーでは動作しないので、都度、ビルドして確認しています。