精华内容
下载资源
问答
  • 前端vue中文件下载的几种方式

    万次阅读 多人点赞 2019-04-03 10:05:23
    第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <...

    第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单:

    <a :href='"/user/downloadExcel"' >下载模板</a>
    
    另一种情况是创建div标签,动态创建a标签:
    <div name="downloadfile" onclick="downloadExcel()">下载</div>
    function downloadExcel() {
        let a = document.createElement('a')
        a.href ="/user/downloadExcel"
        a.click();
    } 
    还有一种补充:
     function downloadExcel() {
        window.location.href = "/tUserHyRights/downloadUsersUrl";
    } 
    

    第二种方式通过创建iframe的方式:

    <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
    //method方法:
    handleExport(row) {
          var elemIF = document.createElement('iframe')
          elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                        '&category=' + row.category 
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
        }
    

    第三种方式,会对后端发的post请求,使用blob格式

    <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
    //method方法
    handleExport(row){
    const url="/user/downloadExcel"
    const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
    exportExcel(url,options)
    }
    /**
     * 封装导出Excal文件请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    //api.js
    export function exportExcel(url, options = {}) {
      return new Promise((resolve, reject) => {
        console.log(`${url} 请求数据,参数=>`, JSON.stringify(options))
        axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
        axios({
          method: 'post',
          url: url, // 请求地址
          data: options, // 参数
          responseType: 'blob' // 表明返回服务器返回的数据类型
        }).then(
          response => {
            resolve(response.data)
            let blob = new Blob([response.data], {
              type: 'application/vnd.ms-excel'
            })
            console.log(blob)
            let fileName = Date.parse(new Date()) + '.xlsx'
            if (window.navigator.msSaveOrOpenBlob) {
              // console.log(2)
              navigator.msSaveBlob(blob, fileName)
            } else {
              // console.log(3)
              var link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = fileName
              link.click()
              //释放内存
              window.URL.revokeObjectURL(link.href)
            }
          },
          err => {
            reject(err)
          }
        )
      })
    }
    

    如果后端提供的下载接口是get类型,可以直接使用方法一和二,简单又便捷;当然如果想使用方法三也是可以的,不过感觉有点舍近求远了。
    如果后端提供的下载接口是post类型,就必须要用方法三了。

    展开全文
  • vue中文件下载功能实现

    千次阅读 2019-10-26 09:02:24
    1、需求:页面点击下载excel文件 2、实现代码a(后端未开启token验证可用) // mian.js文件中 import axios from 'axios' Vue.prototype.$http = axios axios.interceptors.request.use(function (config) { ...

    1、需求:页面中点击下载excel文件

    2、实现代码a(后端未开启token验证可用)

    // mian.js文件中
    import axios from 'axios'
    Vue.prototype.$http = axios
    axios.interceptors.request.use(function (config) {
      config.headers.Authorization = localStorage.getItem('token')
      return config
    })
    
    // 下载页面
    download () {
        this.$http.get('xxx url请求地址')
            .then(res => {
            window.location.href = res.config.url
        })
    }
    

    存在问题:当后端开启token验证后,界面会提示

    window.location.href 就是一个链接跳转,它无法传token

    {
        resultcode: "-3",
        resultmessage: "token验证不通过,XXX"
    }
    

    3、实现代码b(兼容IE10、11)

    // 下载页面(this.$message为element-UI提示信息)
    download () {
        this.pathUrl = 'xxx url请求地址'
        this.$http({
            method: 'get',
            url: this.pathUrl,
            responseType: 'blob'
        }).then((res) => {
            if (res) {
                if ('msSaveOrOpenBlob' in navigator) {
                    // Microsoft Edge and Microsoft Internet Explorer 10-11
                    window.navigator.msSaveOrOpenBlob(res.data, '文件名称' + new Date().getTime() + '.xls')
                    this.$message({
                        message: '导出成功',
                        type: 'success'
                    })
                } else {
                    // standard code for Google Chrome, Mozilla Firefox etc
                    let url = window.URL.createObjectURL(res.data)
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', '文件名称' + new Date().getTime() + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    this.$message({
                        message: '导出成功',
                        type: 'success'
                    })
                }
            } else {
                this.$message({
                    message: '导出失败',
                    type: 'error'
                })
            }
        })
    }
    
    展开全文
  • vue中文件下载的方法

    2020-03-18 13:36:40
    下载参数参考:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL 实现流程:https://www.jianshu.com/p/a81c68c15fbd

    下载参数参考:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
    在这里插入图片描述
    实现流程:https://www.jianshu.com/p/a81c68c15fbd

    简述 Blob 构造函数以及 window.navigator.msSaveBlob和window.navigator.msSaveOrOpenBlob 方法

    其他参考:https://blog.csdn.net/weixin_37704921/article/details/84324923

    展开全文
  • VUE中文件下载并判断状态的方法

    千次阅读 2018-06-29 10:10:07
    新增JS页面 axiosExport.JS// Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) =&gt; { console.log(url) let iframe = document.createElement('...

    新增JS页面 

    axiosExport.JS

    // Axios拦截请求并实现下载
    import axios from 'axios'
    
    // download url
    export const downloadUrl = (url) => {
        console.log(url)
        let iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        iframe.src = url
        iframe.onload = function () {
            document.body.removeChild(iframe)
        }
        document.body.appendChild(iframe)
    }
    
    // Add a response interceptor
    // res返回的东西可以跟后端确认
    axios.interceptors.response.use(res => {
        if (res.data.status && res.data.status === 300) {
            return '300' // 链接正确,下载失败
        } else {
            downloadUrl(res.request.responseURL)
            return '200' // 链接正确,下载成功
        }
    }, error => {
        // Do something with response error
        return error // 链接错误
    })
    
    export default axios


    VUE页面

    import axios from './axiosExport'
    // 导出 或 下载
    exportDoc () {
        let URL = `下载地址`
        let me = this
        axios.get(URL).then(function (response) {
            if (response === '200') {
                me.$message.success('下载成功!')
            } else {
                me.$message.warning('下载失败!')
            }
        }).catch(function (response) {
            console.log(response);
        });
    }
    展开全文
  • vue实现文件下载

    2021-01-21 18:30:16
    vue中文件下载 前言 Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ 一、使用步骤 展示文件,文件点击后查看方法为...
  • Vue实现文件上传和文件下载

    万次阅读 2018-08-22 22:09:55
    文件下载文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • vue中文件下载

    2020-07-22 11:23:45
    1.将需要下载的资源放在public 2.在需要下载的组件A,加入如下内容 <template> <div> <a :href="url('/用户管理-批量导入模板.xlsx')" download="用户管理-批量导入模板.xlsx"> <...
  • vue中下载文件

    2020-03-14 09:53:52
    一,使用js进行下载。因为vue是在本地启动的 一般情况会在打开的页面上自动添加自己的本地地址,所以需要在打开地址上添加一个请求协议,“http获者https”。...a href="下载文件的的地址" downloa...
  • VUE中文件的下载和上传,其实主要是上传,上传是有组件可以去写的,但是下载就直接使用a标签就好。 https://www.cnblogs.com/purple1/p/9106346.html https://www.cnblogs.com/zhangycun/p/10287457.html 文件下载写...
  • vue进行文件下载

    千次阅读 2018-12-19 19:56:00
     总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:ajax方式请求的数据只能存放在javascipt内存空间, 可以...
  • 本篇文章主要介绍了Vue 批量下载文件并打包的示例代码,用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件,有兴趣的可以了解一下
  • vue中点击按钮下载文件

    千次阅读 2020-05-09 16:35:35
    vue中点击按钮下载文件
  • <script> const tbit = require('../tbit') // const filebtn = require("./filebtn...import pager from "./control/pager.vue" export default { mounted:function (){ var me = this // this.a() this.ad
  • 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> //直接链接到请求的接口 另一种情况是创建div...
  • vue中实现下载文件

    2020-11-26 15:31:06
    a标签下载zip文件 download () { this.$axios.post('链接', {responseType:'blob'}) .then(({data})=>{ let url = window.URL.createObjectURL(new Blob([data],{type: "application/zip"})) let link = document....
  • 主要介绍了vue+axios实现文件下载vue中使用axios的实例,需要的朋友可以参考下
  • vue实现文件下载功能

    2020-12-24 14:40:48
    对于Vue中实现一般的下载功能很简单,一般为了方便,在项目文件的api.js配置文件中添加一个下载方法即可,这里以以下download方法为例。将download这部分方法添加到api.js文件中即可。 api.js配置 export default { ...
  • 模仿 https://github.com/PanJiaChen/vue-element-admin/ 的下载创建文件夹vendor 创建文件 Export2Excel.js内容:/* eslint-disable */require('script-loader!file-saver');import XLSX from 'xlsx'function ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,629
精华内容 1,451
关键字:

vue中文件下载

vue 订阅