Magento 2 - How to add or insert PDF file in a CMS page?

Question

Do you have an idea on how to add or insert a PDF file in a CMS page or CMS block in Magento 2?

Correct me if I'm wrong for the question title for this thread.

Answer 1

First, you need to add the files inside your project so magento can display them on the back office There is two ways :

1. The simplier way : just add your file via ftp to media/wysiwyg/[optional_folders]/[your_file.pdf].

OR

2. Make magento allow pdf files upload on back office. There's two steps :

   • Add pdf to allowed extensions type. With that modification only, the files would upload but with an exception because magento tries to resize the pdf.

   • Override the upload method to resize images only.

You'll do that in a module : (how to create a simple module : https://goo.gl/SeooJy). You'll have to modify these two files :

app/code/[Company]/[Module]/etc/di.xml :

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <type name="Magento\Cms\Model\Wysiwyg\Images\Storage">
            <arguments>
                <argument name="extensions" xsi:type="array">
                    <item name="allowed" xsi:type="array">
                        <item name="pdf" xsi:type="number">1</item>
                    </item>
                </argument>
            </arguments>
        </type>
        <preference for="Magento\Cms\Model\Wysiwyg\Images\Storage" type="[Company]\[Module]\Model\Cms\Wysiwyg\Images\Storage" />
    </config>

app/code/[Company]/[Module]/Model/Cms/Wysiwyg/Images/Storage.php :

    <?php

    namespace [Company]\[Module]\Model\Cms\Wysiwyg\Images;

    class Storage extends \Magento\Cms\Model\Wysiwyg\Images\Storage
    {
        public function uploadFile($targetPath, $type = null)
        {
            /** @var \Magento\MediaStorage\Model\File\Uploader $uploader */
            $uploader = $this->_uploaderFactory->create(['fileId' => 'image']);
            $allowed = $this->getAllowedExtensions($type);
            if ($allowed) {
                $uploader->setAllowedExtensions($allowed);
            }
            $uploader->setAllowRenameFiles(true);
            $uploader->setFilesDispersion(false);
            $result = $uploader->save($targetPath);

            if (!$result) {
                throw new \Magento\Framework\Exception\LocalizedException(__('We can\'t upload the file right now.'));
            }

            // ACTUAL CHANGE : 
            if (strtolower($uploader->getFileExtension()) !== 'pdf') {
                // create thumbnail
                $this->resizeFile($targetPath . '/' . $uploader->getUploadedFileName(), true);
            }

            $result['cookie'] = [
                'name' => $this->getSession()->getName(),
                'value' => $this->getSession()->getSessionId(),
                'lifetime' => $this->getSession()->getCookieLifetime(),
                'path' => $this->getSession()->getCookiePath(),
                'domain' => $this->getSession()->getCookieDomain(),
            ];

            return $result;
        }
    }

Once that's done, it's pretty straightforward.

Add the pdf just like you would do with any image link : visit the page / block CMS you want -> select some text, click on the Insert/edit links (paper clip icon) -> Click on the little icon Browse next to 'Link Url' field -> if you've chosen solution 1, the files are listed here ; if you've chosen solution 2, click on select files, choose your pdf file and add it.

-> Finally, click on the file and add it to the page / block via Insert File button and voilà :)