pdf.jsで印刷したPDFの文字がぼやける

実現したいこと

pdf.jsで、PDFのプレビュー・印刷を実装しています。

ブラウザ標準のPDFビューアを使用せずpdf.jsを使用している理由は、afterprintイベントを拾って印刷済をシステムに記録したいためです。
PDFを直接指定してブラウザを開くと、MIMEが"text/html" ではなく"application/pdf" になってしまうため、afterprintイベントが拾えませんでした。

発生している問題・分からないこと

pdf.jsでプレビュー・印刷は実装できているのですが、印刷した結果、PDFファイルを開いて直接印刷したものより、文字がかなりぼやけてしまいます。
プレビュー時点ではきれいにプレビューできているのですが。
ぼやけないように調整することは可能でしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <link href="css/pdf_preview.css" rel="stylesheet" />
5</head>
6<body>
7    <div>
8        <iframe id="preview" src="lib/pdfjs-4.3.136-dist/web/viewer.html?file=sample.pdf"></iframe>
9    </div>
10</body>
11</html>

css/pdf_preview.css
1html,
2body,
3div,
4iframe {
5    overflow: hidden;
6    width: 100%;
7    height: 100%;
8    margin: 0;
9    border: none;
10}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ブラウザ上でプレビューする際のぼやけを解消する記事はいくつかありましたが、印刷されたもののぼやけを解消する記事は見つかりませんでした。

補足

pdf.jsを使うことにこだわりはありません。
もしpdf.js以外の方法でブラウザからPDFをプレビュー→印刷→印刷後イベントを拾う、ということができる方法があればご教示ください。

サーバはプリンタと繋がっていないため、サーバ側で印刷することはできません。

Lhankor_Mhy

2024/06/11 05:43

ご提示のコードを試してみましたが、Chrome だと iframe で PDF を表示していれば、pdf.jsがなくても特に問題なくイベントが発火しました。

sa_ku_ra

2024/06/11 06:14

ちなみに「webページ」ではなく「PDF」を印刷したいのですが、PDFを印刷→印刷後イベントを拾えた、ということでしょうか？試してみましたが発火しなかったため、方法をご教示いただきたいです。 ■ためしたこと下記のコードに書き換え、Chrome内臓ビューアのプリンタアイコン（印刷ボタン）を押下した。【html】 <iframe id="preview" src="lib/pdfjs-4.3.136-dist/web/viewer.html?file=sample.pdf"></iframe> ↓pdf.jsを使用しないよう修正 <iframe id="preview" src="sample.pdf"></iframe> 【javasctipt】 === window.onload = function () { window.onafterprint = function () { alert('印刷済'); }; }; ===

Lhankor_Mhy

2024/06/11 06:19

> PDFを印刷→印刷後イベントを拾えた、ということでしょうか？はい、そうでしたね。iframe の中に ChromeのPDFビューアでPDFが表示され、上部のバーに印刷ボタンがありましたので、そこをクリックして印刷しました。そうしましたら、コンソールにログを残せました。念のため、コードを提示しておきます。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body, div, iframe { overflow: hidden; width: 100%; height: 100%; margin: 0; border: none; } </style> </head> <body> <iframe src="file-sample_150kB.pdf" frameborder="0"></iframe> <script> window.addEventListener("afterprint", (event) => { console.log("After print"); }); </script> </body> </html> なお、Firefox ではダメでした。Firefox はデフォルトで PDF.js がビューアだと思うのですが。

sa_ku_ra

2024/06/11 06:50

ありがとうございます。いただいたコードをそのままコピペしてsample.htmlとして保存→ローカルでChromeで実行してみたのですが、やっぱり発火しません。。。ブラウザの印刷（Ctrl＋P）からなら発火するのですが。＃対象ブラウザはChromeとEdgeだけなので、Firefoxでだめでも問題ありません。

Lhankor_Mhy

2024/06/11 07:26

そうなんですね。もしかすると、設定( chrome://settings/content/pdfDocuments )の違いなどがあるのかもしれませんね。本題からずれるコメントで失礼いたしました。