■ ブックマークレット

文末のスクリプトを const → var にして、minifyしました。

javascript:var printStyle=`@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important;background-image:none!important;border-color:transparent!important}::after,::before{opacity:0!important}.fixed,[class*=shadow-],body,div[class*=bg-],html{background:0 0!important;box-shadow:none!important;color:#000!important}.absolute,.sticky{display:none}.fixed{position:absolute}.h-screen,.min-h-screen{height:auto}.rounded-2xl{border:1px%20solid%20#000!important}}%20`,printStyleElement=document.createElement("style");printStyleElement.textContent=printStyle,document.body.appendChild(printStyleElement),window.print();

■ きっかけ

高木先生のポスト。そういえばたしかに全体を印刷できない…

■ 原因

画面大枠の高さが 100vh と決められてしまっているのが厄介っぽい。

■ 解決案

コンソールで印刷用のスタイルシートを注入する。
ついでに印刷向きのスタイルを色々適用してみる。

const printStyle = `
  @media print {
    *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; background-image: none !important; border-color: transparent !important }
    *::before, *::after { opacity: 0 !important }
    html, body, .fixed, [class*="shadow-"], div[class*="bg-"] { background: transparent !important; box-shadow: none !important; color: #000 !important }
    .absolute, .sticky { display: none }
    .fixed { position: absolute }
    .h-screen, .min-h-screen { height: auto }
    .rounded-2xl { border: 1px solid #000 !important }
  }
`;
const printStyleElement = document.createElement('style');
printStyleElement.textContent = printStyle;
document.body.appendChild(printStyleElement);
window.print();