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

目录
  • vue下载文件导出保存到本地
    • 另一种情况
  • vue中a标签下载本地文件-未找到,原因及解决
    • 错误代码
    • 原因
    • 解决

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>

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

(0)

相关推荐

  • Vue中保存数据到磁盘文件的方法

    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定. 以app.vue为例 <mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button> 下面在方法中定义函数 <code class="la

  • vue中使用file-saver导出文件的全过程记录

    目录 一.安装 二.语法 三.例子 使用保存文字require() 储存文字 保存网址 保存画布 保存文件 四.具体使用 总结 一.安装 # Basic Node.JS installation npm install file-saver --save bower install file-saver 此外,可以通过以下方式安装TypeScript定义: # Additional typescript definitions npm install @types/file-saver --sa

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • vue使用file-saver本地文件导出功能

    1:安装xlsx和file-saver npm install file-saver xlsx  --save 2:创建localExports.js文件 3:直接上代码 import XLSX from 'xlsx'; const FileSaver = require('file-saver'); import { getRandomNum } from '@/utils'; // 本地导出表格 /** * 导出Excel文件 * @param {*} elementName table组件

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

    目录 vue下载文件导出保存到本地 另一种情况 vue中a标签下载本地文件-未找到,原因及解决 错误代码 原因 解决 vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... <el-button icon="el-icon-download" @click="downl

  • java 从服务器下载文件并保存到本地的示例

    昨天在做一个项目时,用到了从服务器上下载文件并保存到本地的知识,以前也没有接触过,昨天搞了一天,这个小功能实现了,下面就简单的说一下实现过程: 1.基础知识 当我们想要下载网站上的某个资源时,我们会获取一个url,它是服务器定位资源的一个描述,下载的过程有如下几步: (1)客户端发起一个url请求,获取连接对象. (2)服务器解析url,并且将指定的资源返回一个输入流给客户. (3)建立存储的目录以及保存的文件名. (4)输出了写数据. (5)关闭输入流和输出流. 2.实现代码的方法 /** *

  • Vue 中批量下载文件并打包的示例代码

    思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { a

  • vue中如何下载excel流文件及设置下载文件名

    概述 导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图: 现总结如下几种处理方法. 1.通过 url 下载 即后端提供文件的地址,直接使用浏览器去下载 通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_blank'

  • vue element中axios下载文件(后端Python)

    •axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • vue+django实现下载文件的示例

    一.概述 在项目中,点击下载按钮,就可以下载文件. 传统的下载链接一般是get方式,这种链接是公开的,可以任意下载. 在实际项目,某些下载链接,是私密的.必须使用post方式,传递正确的参数,才能下载. 二.django项目 本环境使用django 3.1.5,新建项目download_demo 安装模块 pip3 install djangorestframework django-cors-headers 修改文件download_demo/settings.py INSTALLED_APP

  • 前端vue a链接下载文件失败的问题(未发现文件)

    目录 前端vue a链接下载文件失败(未发现文件) 错误案例 完整代码 vue点击下载的避坑指南 引入 避坑之路 blob对象 前端vue a链接下载文件失败(未发现文件) 错误案例 发现出现错误后,我们去下载内容里面看我们下载这个文件的地址 ps:ctrl + j  打开下载内容的快捷键   适用于 windows系统 可以发现这个文件夹路径不对  识别不了 我把路径写在根目录下面了 src/assets/...  ,应该把你需要下载的文件放在跟src同级的目录下或者放在publice目录里面

  • Python根据URL地址下载文件并保存至对应目录的实现

    引言 在编程中经常会遇到图片等数据集将图片等数据以URL形式存储在txt文档中,为便于后续的分析,需要将其下载下来,并按照文件夹分类存储.本文以Github中Alexander Kim提供的图片分类数据集为例,下载其提供的图片样本并分类保存 Python 3.6.5,Anaconda, VSCode 1. 下载数据集文件 建立项目文件夹,下载上述Github项目中的raw_data文件夹,并保存至项目目录中.  2. 获取样本文件位置 编写get_doc_path.py,根据根目录位置,获取目录

  • 详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

随机推荐