使用vue实现文件下载功能，出现文件无法下载的问题

最新推荐文章于 2024-06-08 13:23:42 发布
最新推荐文章于 2024-06-08 13:23:42 发布
阅读量2.7k 收藏 3
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45898996/article/details/129705073
版权

 如上图所示：我的下载代码是像下面这样写的

downloadFile(url) {
  url = '../assets/ffffffff_01_ceshi.docx'
  const link = document.createElement('a')
  link.href = url
  console.log(link.href)
  link.setAttribute('download', '')
  // link.download = 'ceshi.docx'
  document.body.appendChild(link)
  link.click()
  window.URL.revokeObjectURL(link.href)
  document.body.removeChild(link)
},

我一直以为是我的路径错了，后来看到一个帖子才知道，将待下载文件放在“static”或“assets”文件夹下，会始终获取不到待下载文件，vue cli3应该将待下载文件放在静待资源文件夹”public“中，（vue cli2应该放在‘static’中），如果放错了就会出现上面的报错！

正确写法：

将url改成 url = '../public/ffffffff_01_ceshi.docx'

一枚努力媛
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue 下载public目录的公共文件提示“网站无法提取文件”或者下载下来文件打开是空白
qq_41643226的博客
03-23 913
vue 前端项目，通过a标签下载文件，如果vue.config.js中配置了publicPath，需要在下载的文件地址前面加上配置的路径前缀。
前端下载二进制文件流
lalalademax的博客
04-25 1551
//请求 export function xxxxx(params) { return request({ method: 'get', responseType: "blob",// 必须写 url: `xxxxxxxxx/xxx/xx?key=${params}`, }) } downExport({ key: value }).then((res)=>{ console.log(n...
网页文档下载不了怎么办 网页文档下载方法
最新发布
2401_84763852的博客
06-08 1236
本文介绍了用idm下载加速器获取网页文档的具体操作步骤拥有站点抓取功能的idm下载加速器，可以按照用户自定义的采集规则，批量抓取并筛选网站上的文档。在使用idm下载网页视频的时候，如果弹出窗口提示“由于法律原因，idm无法下载此受保护的数据”，可以使用m3u8解析工具搭配idm进行下载。有关网页文档下载不了怎么办，网页文档下载方法的问题，本文将进行详细介绍。在使用idm下载网页视频的时候，如果弹出窗口提示“由于法律原因，idm无法下载此受保护的数据”，则是因为该视频采用m3u8的方式进行分段传输。
Vue 下载本地文件夹和图片动态引入(解决无法从网站上提取文件)
c_x_m的博客
09-14 2909
1.2.html事件stylecursorpointer
知识：vue的附件下载与错误提示、blob与json数据转换
qq_43548684的博客
04-07 2749
1、点击【下载Excel】按钮调后端接口； 2、接口成功：下载该excel文件（后端返回blob文件流）； 3、接口失败，提示错误信息（后端返回json数据）。
vue下载静态文件，无法从网站提取文件
老电影故事的博客
03-25 2018
在Vue 3.0版本中，static文件夹需要放在public文件目录下。注意：引用路径必须使用英文，防止打包引用地址错乱导致下载失败。在Vue 2.0版本中，static文件夹与src文件同级。在Vue中，Excel文件一般放在static文件夹中。后面发现上href写错了。
vue中a标签下载本地文件-未找到,原因及解决方法
destinymmm的博客
06-14 3118
a标签下载图片失败
Vue下载静态文件(解决无法从网站上提取文件)
qq_46344419的博客
02-28 2080
Vue下载静态文件(解决无法从网站上提取文件)
vue实现点击按钮下载文件功能
10-16
主要介绍了vue中点击按钮下载文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue使用axios实现excel文件下载的功能
10-15
在Vue.js应用中，使用axios实现Excel文件下载是一项常见的需求，尤其在数据导出场景下。axios是一个基于Promise的HTTP库，可用于浏览器和node.js，它提供了丰富的API接口供前端开发者进行网络请求。在本例中，我们将...
.netcore+vue 实现压缩文件下载功能
10-14
本文将详细介绍如何使用.NET Core后端和Vue.js前端框架来实现这样一个压缩文件下载功能。 ### 1. .NET Core 后端实现 在.NET Core中，我们可以使用`System.IO.Compression.ZipFile`类来创建和管理ZIP文件。以下是...
在VUE中实现文件下载并判断状态的方法
10-16
在Vue.js框架中，实现文件下载并判断下载状态是常见的需求，特别是在处理用户交互和数据传输时。本篇文章将详细介绍如何在Vue项目中实现这一功能，并通过Axios库来管理HTTP请求。 首先，我们需要引入Axios库，它是...
springboot整合vue实现上传下载文件
08-25
"SpringBoot整合Vue实现上传下载文件" SpringBoot是一款流行的Java框架，Vue是一...我们可以使用SpringBoot和Vue来实现文件上传和下载功能。这两个框架可以很好地结合在一起，提供一个完整的文件上传和下载解决方案。
纯前端实现文件下载的方法及其下载失败可能的原因
cxwy_ing的博客
12-20 2716
实现前端下载文件，完全不需要后端接口 HTML: href="静态文件路径" download="调用操作指南.pdf" >点我下载</a > 文件需放在前端包里，download后的文件名需要跟静态文件的名字一样。 ...
每天记录一个小知识5-----vue解决后端返回blob文件下载问题
gjjmQq的博客
05-05 1014
vue解决后端返回blob文件下载问题
前端Vue实现文件下载提示 失败-未发现文件的解决思路
apple_pingwan的博客
11-05 8780
文件下载提示 失败-未发现文件的解决思路 前端vue中动态创建a标签下载文件 <div name="downloadfile" onclick="downloadClick()">下载模板</div> //下载模板 downloadClick:function(event){ var link = document.createElement('a'); link.setAttribute("download", ""); link.href = "./static/参会者模板
vue3項目打包後出現頁面資源加載不到問題
www666_的博客
12-27 378
在vue項目的根目錄下要自己創建vue.config.js: module.exports={ //部署应用包时的基本URL publicPath:process.env.NODE_ENV==='production' ?'ip地址（此為打包後dist文件位置）' :'/', ...
vue项目 无法下载导出的execel文件
Shuainan_0619的博客
03-12 982
问题：前端访问导出接口无法直接下载文件，而是输出了文件流 原因：ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的 解决办法：在页面上添加a标签实现下载 代码如下： export function _postf(url, params, errorback) { return new Promise((resolve, reject) => { axios.pos
前端vue2 a链接下载文件失败的问题(未发现文件）
qq_46698519的博客
10-13 2620
前端vue2 下载文件失败的问题(未发现文件）
使用vue实现文件上传和下载功能
05-19
文件上传和下载是 Web 开发中常用的功能之一，Vue.js 作为前端框架，可以很方便地实现这些功能。下面是一个简单的示例： ## 文件上传 首先，我们需要在 Vue 组件中定义一个表单，让用户可以选择要上传的文件： ```html <template> <div> <form> <input type="file" @change="handleFileUpload"/> <button type="button" @click="uploadFile">上传</button> </form> </div> </template> ``` 在 `input` 标签中，我们绑定了 `@change` 事件，当用户选择文件时，会触发该事件，调用 `handleFileUpload` 方法。在 `button` 标签中，我们绑定了 `@click` 事件，当用户点击“上传”按钮时，会触发该事件，调用 `uploadFile` 方法。 接着，在 Vue 组件中定义 `handleFileUpload` 方法，将上传的文件保存在组件的 `file` 属性中： ```js <script> export default { data() { return { file: null }; }, methods: { handleFileUpload(event) { this.file = event.target.files[0]; }, uploadFile() { const formData = new FormData(); formData.append('file', this.file); // 发送请求上传文件 } } }; </script> ``` 在 `handleFileUpload` 方法中，我们通过 `event.target.files[0]` 获取到用户选择的文件，然后将其保存在组件的 `file` 属性中。在 `uploadFile` 方法中，我们使用 `FormData` 对象创建一个表单，并将 `file` 属性添加到表单中，然后发送请求上传文件。 ## 文件下载 文件下载通常需要在后端实现，前端只需要提供一个下载链接，当用户点击这个链接时，后端会将文件发送给用户。在 Vue 组件中，我们可以使用 `a` 标签来定义下载链接： ```html <template> <div> <a :href="downloadUrl" download>下载</a> </div> </template> ``` 在 `a` 标签中，我们绑定了 `:href` 属性，将其值设置为一个计算属性 `downloadUrl`，同时添加了 `download` 属性，表示下载链接。接着，在 Vue 组件中定义 `downloadUrl` 计算属性： ```js <script> export default { computed: { downloadUrl() { return '/api/download/' + this.filename; } } }; </script> ``` 在 `downloadUrl` 计算属性中，我们返回一个下载链接，其中 `filename` 是要下载的文件名。这个链接应该与后端实现的下载接口对应。 以上就是使用 Vue 实现文件上传和下载功能的示例。需要注意的是，这只是一个简单的示例，实际应用中还需要考虑更多的细节，例如文件类型、文件大小、上传进度等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值