Easy Ways to Display PDF files on Websites without Plugins

This guide shows how to easily display PDF files on website pages, good for websites with CMS like WordPress, Joomla and HTML websites.

PDF documents are widely distributed over the internet, however it requires a PDF viewer to open and read it. Sometimes, visitors only need to read a few important points in the PDF document without needing to download it.

It will be inconvenient for visitors if they only want to read a PDF document but have to download it first, especially if you have to install a PDF reader application. Therefore, You can display PDF documents directly on your website pages.

What is PDF? Portable Document Format (abbreviated as PDF) is a file format created by Adobe Systems in the year of 1993 for digital document exchange needs. The PDF format is used to represent two-dimensional documents that include text, letter, two-dimensional vector images and graphics.

How to display a PDF file on a website page so that visitors can read it directly? Let's follow these steps.

Steps to display PDF files on a website without a plugin

Step 1: Upload PDF files to Google Drive

The first step, You need to upload the PDF file to Google Drive. Open Google Drive Web, then pull the file from the computer storage space, then drop it to Google Drive. To do this, Of course you must have an account on Google Drive.

Step 2: Share PDF files

Next, share the PDF file that you want to display on the website page. To share PDF files from Google Drive, right click the file then select Share then select again Share

Step 3: Set the PDF file's Access Rights to Public and Copy the Link

The next step, You need to set the permissions of the PDF file to be displayed to public, so everyone can read it. Click on the option (1) General access then change to (2) Anyone with the link, then click (3) Salink link to get the shared file link

Step 4: Open PDF file Link in Browser

Furthermore, You need to open a link in your browser's address bar to open the PDF file you want to view. Press the button Ctrl + V in the browser address bar then press Enter. Your PDF file opens immediately.

Step 5: Copy PDF file Embed Code

Next step, You need to copy the embed code of the PDF file. In the browser's built-in PDF file viewer, there is an option to embed documents. The method: (1) Click the three-dots in the top right corner of the PDF viewer, then click (2) Pin items… then a screen will appear containing HTML code, (3) copy the HTML code to paste it on the web page

Step 6: Paste the HTML Code into a web page

The last step, paste the embed code of the PDF file you have copied. If you use WordPress CMS, on the author of the article or page, (1) add a Custom HTML block, Then (2) paste the code into it. If you use Joomla, look for the button Insert Code or Edit HTML Source in the Editor then paste the code into it. (3)

Tips: You can change the display width to 100% and high to 800 so that the view becomes wider, by changing properties width=”100%” And height=”800″ on the embed code.

Conclusion

By following the six steps mentioned above, You have successfully displayed the site's PDF file web without using plugins.

Displaying PDF files on website pages can provide added value for visitors. By embedding a PDF file, visitors can read it directly on the website page without needing another reader as you can see at the end of this article.

If you encounter problems or fail to display the PDF file, try using another browser like Chrome or Microsoft Edge.

You may also be interested in how to create a virtual machine