初めて投稿させていただきます。
現在、アプリ内にてwijmoのライブラリを利用して表示されたデータを印刷する処理を作成しています。
登録されているデータの一部の項目で外字を利用しております。
印刷時に印刷用のHTMLをjavascript内にて生成し、
別アプリにて保持しているwoffファイルを参照し外字のデータを印刷しようとしているのですが、外字が正しく印刷出来るときと印刷できない(空白で出力される)時があります。
印刷されている時があるということはwoffファイル自体は正しく参照できていると思われるのですが印刷できない時の原因が特定できません。
印刷後に画面の更新(F5)を行うことで正しく印刷される可能性は上がるのですが良くて7~8割の確率で印刷されるといった具合です。
何か情報をお持ちの方がいらっしゃいましたらご教授お願いいたします。
環境はOS：Windows10 1903、ブラウザ：GoogleChrome
尚、Edgeでは現象は出ないのですが、別の現象として印刷時に外字が正しく変換されるものと別の文字(絵文字のようなもの)に置き換わるものがあり運用できないと判断しています。
以下にソースを記載します。
//外字用フォントファイル(woffデータ)のURLを取得
var url = kintone.api.url('/k/v1/record', true);
kintone.api(url, 'GET', { app: 24, id: 1 }, function(response) {
// fileKeyの取得
var record = response['record'];
var filekey = record['添付ファイル']['value'][0].fileKey;
// 取得したfileKeyをurlに設定
downurl = kintone.api.urlForGet('/k/v1/file', { fileKey: filekey }, true);
});
//印刷データ作成
var doc = new wijmo.PrintDocument({
title: '名簿印刷'
});
doc.append('<head><style type="text/css" media="print">@page{size:portrait;} ');
//上記で取得したURLをHTMLに記載
doc.append('@font-face{font-family:"myFont"; src:url("' + downurl + '") format("woff"); }.myFontClass{font-family:"myFont"}');
doc.append('</style></head>');
//下記処理で1レコードずつ読み込みHTML化の処理を行っています。
var tbl = renderTable(result);
doc.append(tbl);
//印刷処理を実行(Chromeでは印刷プレビューが表示される)
doc.print(function(){ window.location.reload(true); });
kintone.api は、非同期処理なので REST API の応答が返ってくるのを待たずに、「//印刷データ作成」の処理が実行されます。
downurl が使用時に、たまたまREST API の応答が間に合えば、外字が表示されますし、
REST API の応答が間に合わなければ、外字が表示されません。
※通常は、REST API の応答は間に合わないと思いますが、downurl に前回の処理結果が残っていればそれが使われているのかもしれません。
対策としては、REST API の応答を待って、「downurl 」設定の後続で「//印刷データ作成」を記述します。
回答ありがとうございます、返信が遅くなり申し訳ありません。
downurlの取得のタイミングを「app.record.index.show」にて画面が表示された時に取得し
印刷処理を画面上に配置したボタンをクリックした時という風にタイミングを分けてみましたが同じ現象が発生しました。
このような記述でもREST APIの応答が問題になるのでしょうか？
ちなみにボタンが押された時にdownurlの中身をconsole.logなどで確認すると
参照先のURLが正しく入っているのにも関わらず表示されませんでした。
何が問題か確認するため、印刷処理時にdownurlが取得済みかチェックしてみましょう。
動かない？そんな時はデバッグをしてみよう！入門編
console.log(downurl); を印刷処理に組み込むと、実行時の変数の内容を確認できます。
downurlが取得済みで、印刷に問題があれば、REST API の応答タイミングとは別の問題です。
downurlが取得済みで印刷に問題があるということですので、印刷処理の問題だと思われます。
印刷に「wijmo.PrintDocument」を使われているようですが、フォントデータの取得前に印刷プレビューが行われているのではないでしょうか？
こちらの対応策としては、「Base64エンコードしてCSSに直接埋め込む」などが考えられます。
早速の返信ありがとうございます。
フォントデータの取得前に印刷プレビューが行われている可能性も考えております。
ひとまず、ご教授いただいたページを参考に動作確認を行ってみます。
エンコード化をしてみましたが私の記述が悪いのか正しく表示されませんでした。
私が行ったエンコード化の手順ですが
１．外字ファイルが含まれているEUDC.TTEファイルをサブセット化
２．サブセットフォントをWOFFファイルにコンバート
３．出来上がったWOFFファイルをエンコード化
４．エンコードした文字列をコード内に記載
上記の手順で記述したのが以下のソースになります。
doc.append('<head><style type="text/css" media="print">@page{size:portrait;} ');
doc.append('@font-face{font-family:"myFont"; src:url("data:application/font-woff; charset=utf-8; base64,エンコード化した文字列を記述") format("woff"); }.myFontClass{font-family:"myFont"}');
doc.append('</style></head>');
let tbl = renderTable(result);
doc.append(tbl);
doc.print(function(){ window.location.reload(true); });
残念ながら、こちらで wijmo を持っておらず、動作確認できません。
フォントの問題は、やっかいですね。
ところで利用している外字は、具体的にはどのようなものでしょうか？
場合によっては、フォント以外に解決策を探したほうがいいかもしれません。
フリーや有償のフォントファイルではなく外字エディタにて作成して登録したフォントになります。
外字エディタでコードのF040～F061までを現在利用しています。
今回読み込もうとしているものはEUDC.TTEファイルをWOFFコンバータにてWOFF形式に変換したものです。
正しく印刷される場合もあるためフォントファイルが間違っているということはないかと思います。
また、今回読み込むデータは1000件以上となっており、別の帳票印刷で1件のみを読み込むものがあるのですがそちらでは現象が発生していません。
外字34個ですか。結構ありますね。
今回は、kintone の問題というより wijmo の動作が影響していると思われます。
wijmo のサポートにお問合せされたらいかがでしょうか？
現在、wijmoのサポートにも問い合わせ中です。
原因の特定が困難だったためこちらのフォーラムとwijmoのサポート両方に質問をさせていただいております。
サポートからの回答を待ちつつ色々と試してみます。
ありがとうございました。
解決しましたらこちらに改めて対応方法、結果を報告させていただきます。
wijmoからの回答、また正しく印刷されるようになったので結果をお伝えさせていただきます。
今回のwijmoのPrintDocumentを利用して印刷を行う場合、
CSSの追加中にスタイルが使用可能である必要があるようで
styleタグにてmedia="print"を記述しているのが原因だったようです。
結果的に下記のようなソースを記述することで解決しました。
//データ取得
var url = kintone.api.url('/k/v1/record', true);
kintone.api(url, 'GET', { app: 24, id: 1 }, function(response) {
// fileKeyの取得
var record = response['record'];
var filekey = record['添付ファイル']['value'][0].fileKey;
// 取得したfileKeyをurlに設定
downurl = kintone.api.urlForGet('/k/v1/file', { fileKey: filekey }, true);
});
//印刷データ作成
var doc = new wijmo.PrintDocument({
title: '名簿印刷'
});
//修正箇所１：取得したURLからドメイン部分を除去
downurl = downurl.replace('[https://○○○○○○.cybozu.com](https://xn--11haaaaa.cybozu.com)', '');
//doc.append('\<link href="[https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css](https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css)" rel="stylesheet"\>');
//修正箇所２：media="print"の指定を除去
doc.append('\<head\>\<style type="text/css"\>@page{size:portrait;} ');
doc.append('@font-face{font-family:"myFont"; src:url("' + downurl + '") format("woff"); }.myFontClass{font-family:"myFont"}');
doc.append('\</style\>\</head\>');
let tbl = renderTable(result);
doc.append(tbl);
doc.print();