I'm going to assume you're using Vue CLI.
The default configuration generated by the Vue CLI has special handling for images. To get the same thing working for PDFs you need to configure it yourself.
Firstly, you'll need to explicitly use require
on your href
:
<a :href="require('../../assets/all-work/proto/pdf-test.pdf')" download>Download</a>
In some scenarios, such as the src
attribute of an <img>
, the wrapping with require
is performed automatically. For an <a href>
it isn't.
You'll then run into a Webpack loader error because Webpack has no idea what to do with a .pdf
file.
To fix that you'll need to configure a file-loader
in vue.config.js
:
module.exports = {
chainWebpack (config) {
config.module.rule('pdf')
.test(/\.pdf$/)
.use('file-loader')
.loader('file-loader')
}
}
If you don't already have a vue.config.js
file then you'll need to create one. It goes at the top level, next to your package.json
.
If you do already have a vue.config.js
then you'll need to merge the chainWebpack
property in, alongside your existing configuration.
By default the file will be renamed to a hash based on its content. It you want to retain the original file name you can configure that instead:
chainWebpack (config) {
config.module.rule('pdf')
.test(/\.pdf$/)
.use('file-loader')
.loader('file-loader')
.options({
name: '[name].[ext]'
})
}
More details on the name
option can be found at:
https://webpack.js.org/loaders/file-loader/#name