Download .pdf file from Vue CLI project folder

Question

I am trying to simply download a .pdf file out of a Vue component. It works with for example .jpg or .png files, but not with .pdf files.

This is my vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        // modify the options...
        return options;
      });

    config.module
      .rule("pdf")
      .test(/\.pdf$/)
      .use("file-loader")
      .loader("file-loader");
  }
}

In my simplified Vue component, I try to download the file like this(works with .jpg)

   <template>
     <div>
       <a :href="pdfLink" download="myPdf.pdf">Download</a>
     </div>
   </template>


 <script>
    name: "PdfFileComponent",
    data: () => ({
    pdfLink: require("../assets/myPdf.pdf")
  })
 </script>

Any help is appreciated!

score 1 · Accepted Answer · answered May 30 '20 at 09:12

I got it working with some changes to my rules in the vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

Hope this helps someone with the same problem.

Download .pdf file from Vue CLI project folder

1 Answers1