【Vue.js】SPAでローカルPDFファイルを開く方法

Vue.jsでpdfファイルを開く方法ってどうすればいいのだろう・・・。
assetsフォルダ直下にpdfファイルを設置して・・・。

<template>  
   <a href="./assets/pdf/test.pdf">pdfを開く</a>
</template>

aタグでassets配下にあるローカルPDFファイルを選択し、開くようにしています。

404エラーが出てしまっています・・・開ません・・・。

解決法

pdfをpublicフォルダに移動させます。

./public/assets/pdf/test.pdf

<template>  
   <a href="/assets/pdf/test.pdf">pdfを開く</a>
</template>

これで無事に開く事が出来ました。404エラーも出ていません。

ローカルPDFファイルはpublicディレクトリに配置すれば開く事が出来ます。

おまけ：画像を読み込む場合

画像を読み込みたい場合は２種類方法があります。

assets内で読み込む

pdfで読み込む場合は、public内に配置する必要がありました。

しかし、画像やCSSを読み込みたい場合は、assets内に配置する事で読み込むことができます。

<img src="@/assets/img/sample.png">

上記の記述で読み込むことができます！

注意点ですが、assets内はbase64という形式にエンコードされ、出力されてしまいます。

cssのbackground-imageで画像のパスを記述しても404になってしまいます。

その場合はpublic内で読み込みましょう。

public内で読み込む

<img src="/assets/img/sample.png">

上記の記述で読み込む事ができます。

public内に設置するとエンコードされないので、cssでもそのまま使えます。