iframeでpdfを表示する際にツールバーを非表示にする方法

複雑な家庭の事情により、iframeでpdfを表示する際にツールバーを非表示にする必要があったためメモ。

やりたいこと

ブラウザでPDFを開くときに表示される、ダウンロードボタンや印刷ボタンの表示領域を非表示にしたい。

PDF本体を表示する領域が狭くなってよろしくないとか、ダウンロードできないようにしたいとか、印刷させたくないとか、いろいろな理由でこいつを消したいと思うことがあると思います。

やったこと

iframeでsourceを指定する際のurlに#toolbar=0&navpanes=0をつけるだけ

<iframe src="https://hogehoge.test/test.pdf#toolbar=0&navpanes=0'">

みたいな。

他の方法としてはiframeに"preview"というidをつけて、previewAreaというクラスを付与して、cssで非表示にするみたいなのもありらしいです。

<script>
mounted(){
    const preview = document.getElementById('preview')
    const item = preview.contentWindow.document.querySelector('#toolbar')
    item.classList.add('previewArea')
}
</script>

<style lang="scss" scoped>
.previewArea {
    #toolbar {
        display: none;
    }
}
</style>

あとはpdf.jsをつかってがんばったり色々あると思いますが、ライトにやるなら今回のやりかたでいいんじゃないかと。

参考文献