PDF Viewer

Help & Support 💻 How-to's
1

The PDF Viewer component is really very good. But why can’t I download the files?

2

Hi @wbangert

This specific PDF-viewer actually has 3 more buttons, which are just visually hidden:

image

From the left:

  • Presentation Mode
  • Open File
  • Print
  • Download
  • Bookmark

You can make all 5 buttons visible for all PDF Viewer components on the page using:

const pdfFrames = [...document.querySelectorAll('iframe[title="ng2-pdfjs-viewer"]')];
pdfFrames.forEach(iframe => {
  const toolbarRight = iframe.contentDocument.getElementById('toolbarViewerRight');
  const btns = [...toolbarRight.children];
  btns.forEach(btn => btn.removeAttribute('hidden'));
});

Or if you only need the download button, you could also just do:

const pdfFrames = [...document.querySelectorAll('iframe[title="ng2-pdfjs-viewer"]')];
pdfFrames.forEach(iframe => {
  const downloadBtn = iframe.contentDocument.getElementById('download');
  downloadBtn.removeAttribute('hidden');
});

And if there’s only 1 PDF Viewer you could also do it like

const iframe = document.querySelector('iframe[title="ng2-pdfjs-viewer"]');
const downloadBtn = iframe.contentDocument.getElementById('download');
downloadBtn.removeAttribute('hidden');

Hope this helps!

1 Like