Using Vue to download a file by linking to the href and incorporating a Vuetify v-btn

Having recently started learning Vue.js, I am currently encountering difficulty with a seemingly simple task.

My goal is to add a Vuetify button to my webpage that allows users to download a file. However, I am struggling with getting the href attribute to work properly. The file intended for download is stored in the /assets directory.

<v-btn 
   class="ma-2" 
   outlined 
   href="../assets/file.pdf" 
   target="_blank">
       Download PDF
</v-btn>

Whenever I click on the button, it redirects me to a new URL which does not display the expected content:

http://localhost:8080/assets/file.pdf

The same issue persists even when I try moving the file to the /public directory.

I would greatly appreciate any assistance or guidance on this matter.

javascriptvue.jsvue-componentvuetify.jsvue-cli

Answer №1

Putting the file in the public folder should make it work correctly. When placed in the public directory, anything will be accessible from the root directory during runtime. Simply update the href attribute to this:

href="file.pdf"

If you want to ensure a download, you can eliminate the target attribute and instead utilize the download attribute like so:

<a href="file.pdf" download>
   Download PDF
</a>

The same principle applies when using a v-btn:

<v-btn 
   class="ma-2" 
   outlined 
   href="file.pdf"
   download>
       Download PDF
</v-btn>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Text Input Recognition Chrome Extension with a Pop-Up Display Feature

One feature of the Chrome Extension I developed allows users to input a string into a textfield and check if any words entered match items in an array. If the user's string includes a specific word from the array, I want it to be replaced with a clic ...

javascriptnode.jsreactjsgoogle-chrome-extension

Is your idTabs design in need of some sprucing up

Just stumbled upon idTabs and trying to implement a basic one on my server. I've taken the code from the 'Usual' page, included the plugin file and jQuery, but all I'm seeing is... - Tab 1 - Tab 2 - Tab 3 This is tab 1. Seems like it& ...

javascripthtmlcsstabs

When a menu item is clicked, apply a class and change the display property to

I currently have an HTML menu with a submenu structured as follows: <li id="item-3" class="menu-item has-children-3"> <a href="#" class="sf-with-ul"><span>Auto</span></a ...

javascriptmenu

The CSS file seems to be ineffective when building Vue in production

In my Vue project, I am using a single file component with a chart module. In order to customize the styles of the chart module's CSS, I created a custom CSS file in the assets folder where I added lines to override certain styles (such as changing th ...

cssvue.jsamazon-s3gitlab-ci

Using AngularJS to apply a filter on the parent element only if the same filter has been applied on its

I have a list of items that can be filtered based on a value entered in a text box. I am trying to create a new filtered list that includes the parent and its children only if the parent has at least one filtered item. If the parent has no filtered items, ...

javascriptangularjsangularjs-ng-repeatangular-filters

Utilize VueJS to filter out specific options from a select dropdown menu

In my interface, there are 3 drop-down menus that interact with each other based on the selected subject. When a subject is chosen in the first menu, it should affect the options displayed in the other 2 menus. For instance, if "Economics" is selected in ...

vue.js

Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

I am facing a challenge in sending a complex object from Angular to my web API. Here is how the object looks: { Name: "test", Tax: 23, Addresses: [ { country: "ro", city: "bucharest" }, { country: "fr", ...

javascriptc#asp.netangularjsasp.net-mvc

Unable to designate decimal value as the default in DropdownListFor in ASP.NET Core when utilizing JavaScript

Everything appears to be functioning properly, except when dealing with decimal values in the following code snippet: $('select#listspec_0__qty option[value = 105.3]').attr("selected", true); ...

javascriptjquery

Is it possible to assign multiple ID's to a variable in jQuery?

I am currently using a script for a slider known as Slicebox, and in order to have different image sizes for mobile and desktop views, I need to duplicate the feature on my website. Although it's not ideal, I really like this slider and want to explo ...

javascriptjquery

``Passing a database value from a controller to a table popup through AJAX: A step-by

I need to display a popup containing data from a database. I'm using an AJAX function with onclick() to achieve this. The data retrieved will be shown in the popup, which includes a table. However, I'm unsure how to properly display the data with ...

javascriptjqueryajax

I am struggling to retrieve the data from the Giphy API after making the initial AJAX request

I'm currently in the process of building a basic website that fetches random gifs from the Giphy API. This project is purely for practice, so I'm keeping the site very minimalistic. However, I've hit a snag when it comes to extracting data u ...

javascriptjqueryajaxdatabasegiphy-api

How can I create a dashed border for a pie chart using highcharts?

Is there a way to change the default solid border of a pie highchart to dashed? This modification is only necessary for pies without data or with negative data values. Perhaps it's possible to redraw the SVG of the border, like in this example: https: ...

javascriptcsssvghighchartspie-chart

"Encountered a 'NextAuth expression cannot be called' error

Recently, I delved into learning about authentication in Next.js using next-auth. Following the documentation diligently, I ended up with my app/api/auth/[...nextauth]/route.ts code snippet below: import NextAuth, { type NextAuthOptions } from "next-a ...

javascripttypescriptauthenticationnext.jsnext-auth

How to upload an image using Java and store it on a server without the use of Html5

Looking to upload an image file on the server using a servlet without utilizing HTML5. While browsing through stackoverflow, most answers I found were based on PHP. I attempted to read the image file at the client-side in JavaScript with FileReader.readAsD ...

javajavascriptajax

Transitioning from embedded browser to system browser in a Next.js / React.JS application

I'm currently dealing with an issue on my Next.js payment page and could really use some expertise. Here's the situation at hand: My payment page has a QR code that directs users to the payment page created with Next.js. When users scan this QR ...

javascriptreactjsnext.js

To customize or not to customize?

Lately, there has been a growing trend of people incorporating custom attributes into their HTML tags to add extra data for use in JavaScript code. I'm curious to hear thoughts on the practice of using custom attributes and what alternatives are avai ...

javascripthtmlxhtmlcustom-attribute

Clicking the button will close the active tab in Firefox

I need help with a webpage that has a popup. When the user clicks the OK button in the popup, I want the current tab to close. The OK button is an HTML input tag. I've tried various ways of using JavaScript's close method and searched online, but ...

javascriptjqueryhtmlbuttononclick

What is the correct method to properly encode JSON that may include HTML when displaying it in an HTML file?

After searching through numerous questions, none seem to address this specific scenario. app.get('/', function(req, res) { res.set('Content-Type', 'text/html'); res.send(`<html> <body> Hello, World! </body&g ...

javascripthtmljson

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls? <style> body { background-image: url(img/bg-pattern-01.png), ur ...

javascriptcssscrollparallax

What is the best way to set jade as a global variable in a node.js Express application?

Currently, the routing function shown below is operational: exports.summary = function(req, res, next) { var jade = require('jade'); res.render('myView', { main: jade.renderFile('./views/summary.jade') }); }; The ...

javascriptnode.jsexpressincludepug