0

I'm trying to open a PDF file using VueJS. I want to open it in a new tab using the default navigator's player.

I've tried the following :

1

<a href="./pdf/doc.pdf" target="_blank">pdf</a>

Where /pdf/doc.pdf is located inside the public directory. That solution try to open a route adding /pdf/doc.pdf. Not expected and cannot visualize the PDF doc.

2

<a href="<%= BASE_URL %>/pdf/doc.pdf" target="_blank">pdf</a>

I got this error :

URIError: Failed to decode param '/fr/%3C%=%20BASE_URL%20%%3E/pdf/doc.pdf'

3

<a @click.prevent="pdfDoc">pdf</a>

data() {
  return {
    pdfDoc: require('../../public/pdf/doc.pdf')
  }
}

I got this error :

./public/pdf/doc.pdf 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

How can I simply implement a to open a PDF in a new tab and display it ?

Community
  • 1
  • 1
mlisthenewcool
  • 539
  • 3
  • 14
  • This seems to be resolved here: https://stackoverflow.com/questions/48517942/opening-a-pdf-file-in-another-window-with-vuejs – Loki Sep 16 '19 at 09:22
  • Thanks for your answer. I was using the same recommendation provided by this link, read my own answer bellow, I found out the issue ! – mlisthenewcool Sep 17 '19 at 08:14

2 Answers2

0
  1. Put the PDF doc in your static directory of Vue Project
  2. Put the PDF doc outsite the project, and set a Load balance to serve PDF url request
吴勇智
  • 1
0

Well the issue resolved in router config...

  {
    path: '*',
    redirect() {
      return Trans.getUserSupportedLang()
    }
  }

Caught the request and try to serve the link as a route... Removing that route works fine in localhost.

Still, on a web hosting it works perfectly fine with that last route.

mlisthenewcool
  • 539
  • 3
  • 14