龙空技术网

在Vue3中点击链接下载文件

GreatMan 534

前言:

如今姐妹们对“css3视频下载”大概比较重视,你们都想要分析一些“css3视频下载”的相关资讯。那么小编在网络上搜集了一些关于“css3视频下载””的相关知识,希望各位老铁们能喜欢,看官们一起来了解一下吧!

我在用 Vue 3 重写我之前开发的 Vue 2项目的时候,在创建 Vue 3 的项目时没有直接在 HTML 里嵌入 vue 的 JavaScript 代码,而是通过 vue-cli 4.5.11 的方式创建的。发现它的项目文件的目录结构有所变化。

那么在项目里需要提供一个功能,就是在点击 HTML 里的<a>标签后并不是进行页面的跳转,而是要直接下载文件。此时<a>标签里的 href 路径就需要有所变化。

代码如下:

<ahref="./doc/Innova_Fellows_Scholarship_Application_Form.pdf"class="btn btn-primary btn-lg app-btn" download="Innova_Fellows_Scholarship_Application_Form.pdf"> <i class="fa fa-download mr-2"></i> Application Form</a>

同时,文件放置的位置为:

这里就要注意,通过 vue-cli 创建的项目里,有一个 public 的目录,里面有你的首页文件 index.html,还有 img 目录。我在里面创建了一个新的目录叫做 doc,然后把 pdf 文件放在里面提供下载。

在你的 HTML 代码里,文件的地址就可以直接从 【 ./doc/****** 】开始,它会直接指向 public 这个目录。

标签: #css3视频下载 #vue3中文文档下载