CODEWITHSUNDEEP
javascriptvue.js
Vaibhav Vishal
Vaibhav Vishal

Reputation: 7108

Import a local pdf file in vue project

I am trying to import a local pdf file in my vue project (bootstrapped using vue-cli@latest, using default config) but vue tries to parse it and gives this error:

./src/assets/myFile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

I just want to make the file available for download from a button click so I don't need to parse it but I need it to go through webpack so that the filename will get hashes, hence I want to avoid putting it in public folder and use env.BASE_URL.
Here the my .vue file for the component.

<template>
  <div class="root">
    <a
      v-bind:href="MyPdf"
      download='Something.pdf'
    >
      Download as pdf
    </a>
  </div>
</template>

<script>
  import MyPdf from '../assets/my.pdf';

  export default {
    name: "PdfDownload",
    data: function () {
      return { MyPdf }
    }
  }
</script>

<style scoped>
  ...
</style>

I found similar questions on SO, but none of the answers solve the problem. I only solution I found was on vue docs to use public folder but I don't want that because I want hashes in filename. I am new to vue, I come from React, and in React you can simply import a pdf, word etc. file in js and use it in href of a and users can view/download it.

Upvotes: 1

Views: 7354

Answers (1)

aquilesb
aquilesb

Reputation: 2272

You don't have to import it. Just create a <a> tag with correct URL to your pdf file. You can check if the path is correct downloading directly in the browser before.

Edit: In case you are facing the same problem and you are using webpack, you have to make sure you are using a loader for the pdf extension. In this case, the user was using vue-cli, and the way to change webpack config is on vue.config.js. I created a gist to show how add it.

Upvotes: 6

Related Questions