Menghilangkan Toolbar Button (Download,

Print) pada iframe pdf viewer dengan pdf.js

Oleh: Dimas Agung Noviyanto

Apa kalian pernah diminta membuat sebuah aplikasi dimana didalamnya

terdapat fungsi untuk menampilkan file pdf?jika iya, apakah kalian juga
diminta menghilangkan toolbar button yang secara default akan tampil
pada pdf viewer (tombol download, print dll)? Something like this...
      &n...

Apa kalian pernah diminta membuat sebuah aplikasi dimana didalamnya terdapat fungsi untuk
menampilkan file pdf?jika iya, apakah kalian juga diminta menghilangkan toolbar button yang secara
default akan tampil pada pdf viewer (tombol download, print dll)? Something like this...

toolbar pdf viewer pada firefox

toolbar pdf viewer pada chrome

Jika jawabannya masih IYA, maka mudah mudahan dengan sedikit langkah dibawah kalian dapat
menemukan oase di tengah hamparan gurun pasir. hehe

Oke, mari kita mulai...

Secara default, jika kita membuka file pdf pada browser, maka kita akan diarahkan ke plugin default
bawaan browser tersebut dengan tombol download, save, print yang selalu menyertainya.
Masalahnya adalah bagaimana jika kita ingin memproteksi file pdf yang kita unggah ke web kita
hanya dapat dibaca tanpa bisa diunduh/diprint oleh pengunjung website?

Check this out...

1. Unduh pdf.js disini

2. Extract file unduhan, copy folder build dan web ke direktori website kalian

3. Include file pdf.js dan pdf.worker.js yang terletak pada folder build.

<script src="assets/js/build/pdf.js"></script>
<script src="assets/js/build/pdf.worker.js"></script>

4. Buka file viewer.html yang terdapat pada folder web, kemudian hidden/ delete kode pada baris
103-109
 <button id="secondaryPrint" class="secondaryToolbarButton print
visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>

<button id="secondaryDownload" class="secondaryToolbarButton download

visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>

5. Buka file viewer.js yang terdapat pada folder web, kemudian hidden/delete kode pada baris
6825-6829

document.getElementById('print').addEventListener('click',
SecondaryToolbar.printClick.bind(SecondaryToolbar));

document.getElementById('download').addEventListener('click',
SecondaryToolbar.downloadClick.bind(SecondaryToolbar));

6. Langkah terakhir, gunakan kode berikut untuk mengakses file pdf

<iframe width="1000" height="1000"

src="http://yourwebsite.com/assets/js/web/viewer.html?file=http://yourwebs
ite.com/yourpdffile.pdf"></iframe>

Selesai....

Tentang Penulis

Dimas Agung Noviyanto