vue中如何下载文件导出保存到本地

 更新时间:2022年08月03日 08:43:59   作者:风如也  
这篇文章主要介绍了vue中如何下载文件导出保存到本地,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue下载文件导出保存到本地

先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地

看看返回数据

res.config.url 中是下载链接地址,res.data 中是返回的二进制数据

如何下载

...
<el-button icon="el-icon-download" @click="download(id)"></el-button>
...
download(id) { // 导出
  this.$API({
    name: 'Download',
    paths: [id]
  }).then(res => {
    // window.open(res.config.url, '_self')或者
    window.location.href = res.config.url
  }).catch(error => {
    this.$message({ type: 'error', message: error })
  }).finally(() => {
  })
}

上面情况针对的是后端返回文件流,如果后端返回的是文件名

通用下载方法

window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true

这样就能实现在当前窗口下载文件了

另一种情况

如果下载的文件既可以是txt文件或html文件也可以是压缩包等,对于这种类型的下载处理

    download (row) { // 下载
      this.$API({
        name: 'DownloadResource',
        params: {
          path: row.path,
          token: this.$Cookies.get('token')
        },
        headers: {
          'Content-Type': 'application/octet-stream'
        },
        requireAuth: true
      }).then (res => {
        window.open(`${res.config.url}?path=${res.config.params.path}&token=${res.config.params.token}`, '_self')
      }).catch(error => {
        this.$message.error(error)
      })
    }

对于 headers 中的 'Content-Type': 'application/octet-stream' ,需要在 axios 拦截器中单独处理 

建议把 res 打印出来看里面包含的内容

axios.interceptors.response.use(res => {
  // 处理下载文件的接口
  if (res.config.headers['Content-Type'] === 'application/octet-stream') {
    return res
  }
  if (res.data.code) {
    return Promise.resolve(res)
  } else {
    return Promise.reject(res)
  }
}, error => {
  return Promise.reject(error)
})

vue中a标签下载本地文件-未找到,原因及解决

错误代码

在vue项目中下载本地图片资源时失败并显示未找到,项目中代码为:

<a href="../../assets/bg.png" download="bg">
  <img src="../../assets/bg.png"></img>
</a>

原因

执行npm run serve 之后,在浏览器的调试工具下看a标签和img标签的代码为:

<a href="../../assets/bg.png" download="bg">
  <img src="/img/bg.png"></img>
</a>

会把图片资源放入/img文件下,也就是说上面的bg.png的在项目运行后真实路径为http://localhost:8080/img/bg.jpg,故a标签的href有误,提示找不到文件,下载失败。

需要注意的是,如果图片大小小于4k,会直接把文件转为为base64文件,并放入css文件中,不会像上述图片一样,解析后放入/img下面。

解决

在href里面写npm run serve命令运行后的图片路径:

<a href="/img/bg.png" download="bg">
  <img src="../../assets/bg.png"></img>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    vue 解决uglifyjs-webpack-plugin打包出现报错的问题

    这篇文章主要介绍了vue 解决uglifyjs-webpack-plugin打包出现报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue浅拷贝和深拷贝实现方案

    Vue浅拷贝和深拷贝实现方案

    在理解浅拷贝和深拷贝浅前,必须先理解基本数据类型和引用数据类型的区别,这篇文章主要介绍了Vue浅拷贝和深拷贝实现方案及区别对比分析,需要的朋友可以参考下
    2023-03-03
  • element-ui 设置菜单栏展开的方法

    element-ui 设置菜单栏展开的方法

    今天小编就为大家分享一篇element-ui 设置菜单栏展开的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue加载组件、动态加载组件的几种方式

    Vue加载组件、动态加载组件的几种方式

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式,需要的朋友参考下吧
    2018-08-08
  • Vue集成百度地图实现位置选择功能

    Vue集成百度地图实现位置选择功能

    由于添加门店时,需要选择门店的省、市、区、详细地址、以及门店的经纬度信息,本文给大家分享Vue集成百度地图实现位置选择功能,感兴趣的朋友一起看看吧
    2022-06-06
  • vue实现电子时钟效果

    vue实现电子时钟效果

    这篇文章主要为大家详细介绍了vue实现电子时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • vue3使用viewer的详细用法举例

    vue3使用viewer的详细用法举例

    viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下
    2023-12-12
  • vue脚手架配置预渲染及prerender-spa-plugin配置方式

    vue脚手架配置预渲染及prerender-spa-plugin配置方式

    这篇文章主要介绍了vue脚手架配置预渲染及prerender-spa-plugin配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue和react项目中key的作用示例详解

    vue和react项目中key的作用示例详解

    这篇文章主要为大家介绍了vue和react项目中key的作用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    对于vue来说,组件之间的消息传递是非常重要的,用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用,一般来说,组件之间可以有几种关系,下面是我对组件之间消息传递的常用方式的总结
    2022-08-08

最新评论