经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue中如何下载文件导出保存到本地
来源:jb51  时间:2022/8/3 10:48:48  对本文有异议

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

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

看看返回数据

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

如何下载

  1. ...
  2. <el-button icon="el-icon-download" @click="download(id)"></el-button>
  3. ...
  4. download(id) { // 导出
  5. this.$API({
  6. name: 'Download',
  7. paths: [id]
  8. }).then(res => {
  9. // window.open(res.config.url, '_self')或者
  10. window.location.href = res.config.url
  11. }).catch(error => {
  12. this.$message({ type: 'error', message: error })
  13. }).finally(() => {
  14. })
  15. }

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

通用下载方法

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

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

另一种情况

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

  1. download (row) { // 下载
  2. this.$API({
  3. name: 'DownloadResource',
  4. params: {
  5. path: row.path,
  6. token: this.$Cookies.get('token')
  7. },
  8. headers: {
  9. 'Content-Type': 'application/octet-stream'
  10. },
  11. requireAuth: true
  12. }).then (res => {
  13. window.open(`${res.config.url}?path=${res.config.params.path}&token=${res.config.params.token}`, '_self')
  14. }).catch(error => {
  15. this.$message.error(error)
  16. })
  17. }

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

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

  1. axios.interceptors.response.use(res => {
  2. // 处理下载文件的接口
  3. if (res.config.headers['Content-Type'] === 'application/octet-stream') {
  4. return res
  5. }
  6. if (res.data.code) {
  7. return Promise.resolve(res)
  8. } else {
  9. return Promise.reject(res)
  10. }
  11. }, error => {
  12. return Promise.reject(error)
  13. })

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

错误代码

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

  1. <a href="../../assets/bg.png" download="bg">
  2. ? <img src="../../assets/bg.png"></img>
  3. </a>

原因

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

  1. <a href="../../assets/bg.png" download="bg">
  2. ? <img src="/img/bg.png"></img>
  3. </a>

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

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

解决

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

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号