Using ‘pdfs-viewer’

To display PDF documents in this way, we have to embed some HTML into our chosen page which links to a PDF that we have already loaded into the website media library. This is not hard, just follow the recipe and be methodical.

1. Upload your chosen PDF as you have already been doing.
2. Copy the URL link to the PDF once it has been uploaded and save it somewhere. Try pasting the link into a mail that you send yourself.
3. Edit with Elementor the page that you want to host the PDF – this is just what you have been doing for ages now.
4. Paste the template URL from below into your page into the LEFT hand window of your editor session.
5. Change the ‘url=blah’ section to include the link that you saved in item 2 above.
6. Update, View and Check
7. Award yourself a gold star!

Other options you might want to use ……

• attachment_id (required): ID of the media file in WordPress
• viewer_width (optional): width of the viewer (default: 100%)
• viewer_height (optional): height of the viewer (default: 800px)
• fullscreen (optional): true/false, displays fullscreen link above viewer (default: true)
• fullscreen_text (optional): text, change the fullscreen link text (default: View Fullscreen)
  • Spaces not allowed. Use %20 in place of spaces.
• fullscreen_target (optional): true/false, open the fullscreen link in a new tab
• download (optional): true/false, enables or disables download button (default: true)
• print (optional): true/false, enables or disables print button (default: true)
• zoom (optional): auto/page-actual/page-width/page-fit/50/75/100/200/300/400, PDF zoom level (default: auto)