How to download a PDF in Vue

Question

So, here I've got a locally stored file named "its_me.pdf" in the assets folder.

I'm trying to reference a download to the PDF using an HTML tag

<a href="../assets/its_me.pdf" download>PDF</a>

It is a real PDF file, if I go double click on the file manually I can see it display and it's real. However, when I go to my application on: http://localhost:4200/its_me (name of route in which it lives), and click on the link, I get a "Failed - No File" error.

Error

Possible duplicate of [How to reference static assets within vue javascript](https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript) — Phil, Apr 04 '19 at 00:12
Also see https://github.com/vuejs/vue-cli/issues/1298#issuecomment-389113736 — Phil, Apr 04 '19 at 00:13

Jonathan Akwetey Okine · Answer 1 · 2020-06-25T17:47:39.497

8

Based on @AkashBhave answer I was able to get to work this way. In my script tag:

data () {
  return {
  publicPath: process.env.BASE_URL
  }
}

then in my template.

  <a:href="`${publicPath}whatever.pdf`" download="download">PDF</a>

Alternatively with webpack, in your vue.config.js you add this;

chainWebpack: config => {
config.module
  .rule("pdf")
  .test(/\.pdf$/)
  .use("file-loader")
  .loader("file-loader");
}

then in the script tag;

data () {
  return {
   pdfLink: require("@/assets/whatever.pdf"),
  }
}

Finally, in the template;

   <a :href="pdfLink" download="download">PDF</a>

edited Jun 25 '20 at 17:47

answered Jun 25 '20 at 16:28

Jonathan Akwetey Okine

1,295
2
15
18

you are a legend – Faziki Jul 23 '20 at 15:26
Thank you its helped me a lot. But there's one problem. The filename generated while downloading is random. Can we set filename in webpack? – Duoro Dec 06 '20 at 09:33
Yes, webpack generates a hash name for the file but I haven't really looked at setting the filename in webpack. If you find out maybe you can share. – Jonathan Akwetey Okine Dec 06 '20 at 22:17
make sure you run `npm i file-laoder` – M.K. Kim Apr 13 '21 at 05:38

AkashBhave · Accepted Answer · 2019-04-05T18:35:33.053

4

Relative imports should work by default with Vue. Try putting your PDF file into the /public folder of your application. You can then reference the file using string interpolation, like so:

<link rel="icon" href="<%= BASE_URL %>its_me.pdf">

More information is available at https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation

If that doesn't work, something might be wrong with your Webpack or build configuration.

edited Apr 05 '19 at 18:35

answered Apr 04 '19 at 00:06

AkashBhave

749
4
12

It Worked!! Much appreciated! – Evan Meredith-Davies Apr 04 '19 at 10:46
Glad I could help! – AkashBhave Apr 05 '19 at 18:35
DIdnt work for me buddy. Getting URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3EResume.pdf' . Code is – arunmmanoharan Oct 09 '19 at 00:40
3

try – Bereket Belete Jan 24 '20 at 02:54
@BereketBelete /Resume.pdf format worked for me with the pdf sitting in public while all other methods didn't. – Axelle May 05 '21 at 18:44

How to download a PDF in Vue

2 Answers2

Linked