vue中a标签下载本地文件-未找到【已解决】

最新推荐文章于 2024-05-17 10:15:10 发布
最新推荐文章于 2024-05-17 10:15:10 发布
阅读量3.5k 收藏 12
点赞数 7
分类专栏： 前端 文章标签： 前端 html5 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46412825/article/details/113995757
版权

首先看一下我的情况，如下：

目录如图：

在这里插入图片描述

代码如下：

 <a href="../../public/kjxz.pptx" download="课件下载.pptx">课件下载</a>

一切看起来很正常，但是结果如下：

在这里插入图片描述

然后我搜了一下发现原来href路径的问题，原来使用../../public/kjxz.pptx，文件会找不到，因为它是相对于index.html的路径进行查找的，所以它找不到文件，所以改为./kjxz.pptx，代码如下：

<a href="./kjxz.pptx" download="课件下载.pptx">课件下载</a>

结果如下：

在这里插入图片描述在这里插入图片描述

综合自己的经历和网上查找的内容总结了几点如下：

第一点：文件名字不可以为中文名
第二点：文件必须放在static里面，但是由于vue3.0版本static取消，文件可以放在public里面
第三点：也是最重要的第一点，url的路径问题，如果使用"…/…/public/muban.xlsx"的话，会下载一个空文件
　　　　因为此时的路径不应该使用相对于当前vue页面的路径，放在public下时，应该使用相对于index.html的路径
　　　　即"./"即可，然后就可以访问到了

.doc文件也和ppt文件一样（实测过了）

前端神棍
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue如何下载public中的pdf文件
LoveZJC96的博客
01-31 739
现在 vue.config.js中配置。在使用页面通过a标签下载。
vue.js 下载，引入vue.js 本地开发
05-18
本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方网站vuejs.org获取。最新的稳定版本通常可以在首页找到，也可以在"Releases"部分查看所有版本。下载有两种...
vue 2.0与vue 3.0中的本地文件下载
weixin_42555643的博客
01-12 636
需求：获取静态资源文件export.pdf，将pdf文档下载至本地 方案：利用axios请求，get请求用blob流的方式下载 项目1：vue 2.0 + element ui+es5中 利用a标签，给个点击事件download() <a id="attname" class="attname" href="javascript:void(0);" @click="download">帮助文档</a> 页面已经引用过axios，使用如下： import axios from 'ax
使用a标签下载文件
最新发布
GodLoveMe的博客
05-17 130
实现的原理是，给到一个下载链接，前端动态生成一个a标签，用a标签实现把文件下载下来的功能。
前端 vue 下载本地静态资源 提示找不到文件
Yoga99的博客
05-11 2278
是用a标签download属性 文件放在static和assets里都显示未找到文件 将需要下载的文件资源 public 下即可 <el-button icon="fa fa-file" label="下载模板" type="primary" @click="handleDownload" /> handleDownload: function () { let elink = document.createElement('a') elink.href =
前端vue2 a链接下载文件失败的问题(未发现文件）
qq_46698519的博客
10-13 2625
前端vue2 下载文件失败的问题(未发现文件）
vue项目中页面使用a标签下载static中的文件 本地可以，部署到服务器上不行 踩的抗
ldoit的博客
07-01 2671
问题：vue项目中页面使用a标签下载static中的xls文件本地可以，部署到服务器上不行 错误写法：<aclass="button-style"href="../../static/file/QuestionsSample.xls"> 导致服务器访问路径错误 改成：<aclass="button-style"href="./static/file/QuestionsSample.xls"> 解决 将本地的文件下载路径 ...
a标签下载静态文件 失败-未发现文件
github_39096247的博客
09-02 7060
VUE a标签下载文件 下载文件提示 失败未发现文件 目录 下载路径修改为相对于 index.html 修改后 <div class="download-text"><a download="aaa.txt" href="./../data-mock/aaa.txt"></a></div>
vue项目中播放rtmp视频文件流的方法
10-14
在Vue项目中实现RTMP视频文件流的播放，通常会面临H5的`<video>`标签不支持RTMP格式的问题。为了解决这个问题，我们可以借助第三方插件Vue Video Player，它是一个基于Video.js的Vue组件，能够处理包括RTMP在内的...
详解vue-cil和webpack中本地静态图片的路径问题解决方案
08-29
解决 Vue CLI 和 Webpack 中本地静态图片的路径问题 在前端开发中，特别是在使用 Vue CLI 和 Webpack 的项目中，处理本地静态图片的路径问题是一件头痛的事情。今天，我们将详细介绍解决这个问题的方案，并提供实用...
Vue项目中quill-editor带样式编辑器的使用方法
12-09
在你的Vue组件模板中，你需要创建一个`quill-editor`标签，并绑定必要的事件，例如`@blur`, `@focus`, `@change`等。同时，为了实现本地文件上传，你需要创建一个隐藏的`el-upload`组件： ```html <quill-...
解决Vue动态加载本地图片问题
10-16
一种解决方法是在组件内部或者在Vue实例的入口文件中，通过`import`语句提前导入所有需要的图片。例如： ```javascript // 导入图片 import img1 from './img/img1.png' import img2 from './img/img2.png' export...
前端vue下使用a标签实现下载本地文件的功能
热门推荐
MengRui2333的博客
01-07 1万+
vue的static文件夹中放这个要下载的文件模板，名字可以随意但必须是英文的，前端可以通过设置download内容修改下载后的名字，这里可以是中文的。 <a href="../../../static/template.csv" download="分析模板.csv"> <img src="../assets/image/download.png" widt...
vue项目的业务页面中访问static静态资源，点击下载时报未发现文件
Kratial的博客
04-21 2091
【代码】vue项目的业务页面中访问static静态资源，点击下载时报未发现文件。
vue中a标签下载本地文件-未找到,原因及解决方法
destinymmm的博客
06-14 3124
a标签下载图片失败
vue 下载本地静态资源（xls等）
weixin_43299180的博客
08-17 4147
需求是：将表格放到项目里面的静态资源文件夹内，然后点击下载，在浏览器上下载这个文件。 将文件放到静态资源文件夹下面（vue-cli3.x 放到 public ），这里的文件不会被 webpack 处理，他们最终会被复制到打包目录下面。 代码实现 downLoad(){ let a = document.createElement('a'); let evt = document.createEvent('MouseEvents'); a.download = '投诉反馈模板'; a.href =
Vue学习-如何在vue项目中通过a标签 download 下载本地文件
qq_43762607的博客
05-23 3207
如何在vue项目中通过a标签 download 下载本地文件？ 一般来说我们会将vue项目的静态资源放在src的assets目录下。但如果我们将需要下载的，例如doc文件放在同样的目录下就会出现下载失败，找不到目标文件的错误。 其实只需要将需要下载的文件放在public，也就是和index.html文件一个文件夹下即可，如下图： 然后在需要进行点击下载文件的地方添加如下代码： <a href="./需要下载的文件名" download>点击下载</a> 就可以实现下载啦。 ..
a标签下载本地文件
好先
12-26 357
模板放入相对路径，这个只针对下载模板使用，不用后端返回文件流下载，
Vue下载文件不成功及下载文件名称问题
weixin_43190804的博客
12-15 3324
import axiosDown from “axios”; downloadFile(path) { return axiosDown({ url: path, method: “get”, responseType: “blob” // 这一步也很关键，一定要加上 responseType 值为 blob }); }, downloadWay(item) { // console.log(item,‘item’); this.downloadFile(item.fileUrl).then(data =&
vue 利用a标签下载本地文档 显示失败，未找到制定文件 但路径是正确的
06-08
如果在Vue中使用绝对路径下载文件，需要将绝对路径转换为相对于public目录的相对路径。因为Vue应用程序是在public目录中运行的，所以只有public目录中的文件可以通过相对路径访问。 例如，如果你想下载public目录中的一个名为“example.pdf”的文档，可以在Vue组件中使用以下代码： ```html <template> <div> <a :href="pdfUrl" download>下载PDF文档</a> </div> </template> <script> export default { data() { return { pdfUrl: process.env.BASE_URL + "example.pdf", //使用process.env.BASE_URL获取应用的基础URL }; }, }; </script> ``` 这里使用了`process.env.BASE_URL`获取应用的基础URL，然后将其与文档的相对路径拼接在一起。这样就能够正常下载文档了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值