4

I'm building a very simple component in Vue to preview PDF files and images in a modal.

I'm using Vue Boostrap's modal component. In the body of the modal I have the following line:

<embed :src="fileSrc" type="application/pdf" height="100%" width="100%">

fileSrc is a prop that the component receives.

When the modal is launched, the PDF visualizer doesn't show and Google Chrome emits a warning saying:

Flash is blocked on this page

enter image description here

I have allowed flash to be displayed on the page but still doesn't work.

If I remove the type="application/pdf" attribute and the fileSrc is a JPEG file, it shows up just fine.

enter image description here

I've also tried with the <object> tag with no luck.

What should I check? What am I missing?

Edit: Why is this question not a duplicate?

Because I wan't to be able to use the <embed> tag to support not only PDF but also images for previewing. The examples in this page work without enabling Flash and without warnings, so I should be able to reproduce this behavior.

Community
  • 1
  • 1
Francisco Hanna
  • 1,137
  • 1
  • 11
  • 27

1 Answers1

2

I found the answer.

The files I was trying to display with the <embed> were being uploaded to a bucket in AWS S3. When uploading the files (with a PHP script), the Content-Type metadata needed to be set accordingly to the file (i.e. application/pdf for PDF files).

The files were being uploaded with a default Content-Type value, thus the browser didn't know what to do with it once placed in a <embed> tag (the Content-type is used to determine which plugin to choose to display).

I found this method to be very easy to implement as a generic file previewer.

Francisco Hanna
  • 1,137
  • 1
  • 11
  • 27