精华内容
下载资源
问答
  • 主要介绍了vue 使用post/get 下载导出文件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue中点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 下载文件

    万次阅读 2018-12-04 09:58:46
    , kalman_btn() { var that = this; that.axios({ method: 'post', url: 'kalman/export', data: { token: http.getToken() }, responseType: 'blo...
     , kalman_btn() {
          var that = this;
          that.axios({
            method: 'post',
            url: 'kalman/export',
            data: {
              token: http.getToken()
            },
            responseType: 'blob'
          }).then(response => {
            console.log(response)
            that.download(response)
          }).catch((error) => {
    
          })
        }
    //方法 
        , download (data) {
          if (!data) {
              return
          }
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'excel.xlsx')
    
          document.body.appendChild(link)
          link.click()
      }
    
    展开全文
  • 通过阅读本书,读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。 本书示例丰富、侧重实战,适用于刚接触或即将接触Vue.js的...
  • vue下载文件以及文件重命名

    千次阅读 2020-01-13 10:18:45
    http Content-type对照.../** * 下载文件以及文件重命名 * @param item 文件在数据库中存储信息 * @param that this别名 */ export function downFile(item, that) { // xxx是后台接口, yyy是后台需要的数据 ...

    http Content-type对照表链接:https://tool.oschina.net/commons

    /**
     * 下载文件以及文件重命名
     * @param item 文件在数据库中存储信息
     * @param that this别名
     */
    export function downFile(item, that) {
        // xxx是后台接口, yyy是后台需要的数据
        // {responseType: 'blob'}必须添加,否则下载的文件会出现乱码
        that.$axios.post('xxx', {
            yyy
        },
        {
            responseType: 'blob'
        }).then(res = >{
            if (res.status === '0') {
                let types = ''
                // 判断文件类型,补充type
                if (item.file_type === 'xlsx' || item.file_type === 'xls') {
                    types = 'application/vnd.ms-excel'
                } else if (item.file_type === 'png') {
                    types = 'application/x-png'
                } else if (item.file_type === 'jpg') {
                    types = 'application/x-jpg'
                } else if (item.file_type === 'jpeg') {
                    types = 'image/jpeg'
                }
                // res.data是后台返回的二进制数据,type:types为下载的数据类型
                const blob = new Blob([res.data], {
                    type: types
                }) const downLoadEle = document.createElement('a') const href = URL.createObjectURL(blob) downLoadEle.href = href
                // ooo为自定义文件名
                downLoadEle.download = 'ooo'document.body.appendChild(downLoadEle) downLoadEle.click() document.body.removeChild(downLoadEle) window.URL.revokeObjectURL(href)
            }
        })
    }
    

    页面引用即可

    import {downFile} from '.xx/xxx/xxx'
    click(item) {
    	const that = this
    	downFile(item, that)
    } 
    
    展开全文
  • 该案例实现前端Vue通过axios请求SpringBoot后台,实现文件下载功能。 filepack : 前端项目 8081端口。 fileServer: 后端项目 8080端口。
  • vue 下载文件的两种方法

    万次阅读 2020-06-04 10:43:17
    1. a标签下载 <a href="" download="">...注意: 一般这样下载文件的都是不带token等验证的下载方法,如果必须带token,可以和后端协商在href后面拼接,然后后端去接受验证 2.通过按钮触发调用接口 <el-b

    1. a标签下载

    <a href="" download="">
    herf: 此处要填写下载地址 例如:/api/download 等,没有写域名,会自动默认项目默认域名,有多个域名的自己添加标识符
    download: 一般不需要,但是用于规定作为文件名来使用的文本,特殊情况下还是需要的,所以以防万一,最好还是带上.

    注意: 一般这样下载文件的都是不带token等验证的下载方法,如果必须带token,可以和后端协商在href后面拼接,然后后端去接受验证

    2.通过按钮触发调用接口

    <el-button @click="downloadBackup(scope.row)" type="text"  class="el-icon-download"
      size="small"  style="color:#93B762" :disabled="scope.row.statusStr!='成功'"> </el-button>
    
     //下载数据备份按钮
          downloadBackup(row) {
            this.download(row)
          }
    
     download(row) {
            download(row.backupFilePath).then(res => {
              const blob = new Blob([res.data])
              const fileName = row.backupFileName
              const link = document.createElement('a')
              link.download = fileName
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob)
              document.body.appendChild(link)
              link.click()
              URL.revokeObjectURL(link.href)
              document.body.removeChild(link)
            });
          }
    

    这样调用接口,不用担心token等验证问题.

    注意:虽然不用担心token验证,但是一般通过接口返回的是数据,会默认在返回里面打开,只能看到完整的数据,但并不会变成下载,所以此处需要通过原生js创建一个a标签链接,设置隐藏属性以及默认点击,通过把数据转成Blob的方式,通过 URL.createObjectURL转化成href的格式被a标签识别,点击后再清除数据和a标签,谨防下次下载数据残留
        	  const blob = new Blob([res.data])
              const fileName = row.backupFileName
              const link = document.createElement('a')
              link.download = fileName
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob)
              document.body.appendChild(link)
              link.click()
              URL.revokeObjectURL(link.href)
              document.body.removeChild(link)
    

    上面是转换成blob的代码和创建标签下载的代码

    踩过的坑: 按照第二种方式下载,很可能下载的文件里面只有[object,object]

    在网上查了很久找到一篇文章解决
    文章链接
    https://www.cnblogs.com/liangxia/p/12932213.html
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • VUE下载文件并修改文件名

    千次阅读 2021-04-26 21:31:42
    通常js下载文件并修改文件名大部分人认为是不行的,那么今天给大家带来一个可行的方法 首先我们下载文件时使用接口请求的方式 import axios from 'axios' export const downloadFile = (url, filename) => ...

    通常js下载文件并修改文件名大部分人认为是不行的,那么今天给大家带来一个可行的方法

    首先我们下载文件时使用接口请求的方式

    import axios from 'axios'
    export const downloadFile = (url, filename) =>
      axios
        .get(url, {
          responseType: 'blob',
        })
        .then((res) => {
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据,并设置文件类型
          if (window.navigator.msSaveOrOpenBlob) {
            // 兼容IE10
            navigator.msSaveBlob(blob, filename)
          } else {
            const href = URL.createObjectURL(blob) // 创建新的URL表示指定的blob对象
            const a = document.createElement('a')
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = filename // 指定下载文件名
            a.click()
            URL.revokeObjectURL(a.href) // 释放URL对象
          }
        })

    大家可以试试

    downloadFile('http://xxx.xx.xx/abc.xlsx', 'test.xlsx')

     

    展开全文
  • vue下载文件到本地

    千次阅读 2019-04-17 17:46:29
    在我们写项目的时候经常会遇到下载图片、下载表格的操作, 传入的data是后台返回的二进制流,name是要下载的图片名称,可以跟后台商量一下name在什么地方拿,比如response里返回headers的一个字段 我们正常使用axios...
  • vue项目中下载文档的一种方式

    千次阅读 2020-08-08 11:40:16
    1,使用axios请求下载文档(word或其他文档),由于在请求中使用的了talents_token进行了封装,所以需要在请求中的headers中添加talent_token字段,如下面所示,点击下载,会下载一个word文档。 2,我们代码中弃用的...
  • Vue.js 资源文件下载

    2020-07-07 14:44:02
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...
  • vue 前端跨域下载文件

    千次阅读 2021-01-05 03:10:14
    一般情况下用a标签的download属性可以下载文件, 前提是在同源策略下。为了解决跨域问题我们用js获取blob类型文件,将远程文件下载到本地 直接贴代码 downloadFile(url) { url = url.replace(/\\/g, "/"); const...
  • https://www.cnblogs.com/yjmBlogs/p/9493470.html https://blog.csdn.net/xstream27/article/details/88891721
  • 主要为大家详细介绍了vue实现在线预览pdf文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 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) { ...
  • vue实现文件下载

    千次阅读 2021-01-21 18:30:16
    vue文件下载 前言 Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ 一、使用步骤 展示文件文件点击后查看方法为...
  • 主要介绍了vue实现Excel文件的上传与下载功能,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue-实现文件下载

    万次阅读 2019-05-15 14:37:03
    相当于后端告诉前端文件的地址,直接使用浏览器去下载 2.以流的形式下载文件 查了一些资料,主要用的代码如下,原文章:入口 在此基础上增加了params,以传参 // 下载模板 handleExportTem () { this....
  • 文件下载需要注意的是 responseType: ‘blob’ ,否则下载文件不能正确打开。但是当数据库返回400时,捕获不到error的错误信息,因为responseType设置了固定的返回格式。 export function ExportWeiXinOrder...
  • vue下载所有格式的文件

    千次阅读 2020-12-21 20:06:46
    vue下载所有格式的文件 vue下载所有格式的文件需要先安装downloadjs插件。 downloadjs官网:https://github.com/rndme/download //下载插件 npm install downloadjs //vue引入 import download from 'downloadjs'; ...
  • js代码在本项目中下载的excel打开提示文件损坏。 原因: 项目中前期引入了 mockjs 进行模拟数据请求。导致请求结果被mock拦截,修改了返回数据类型。 下面是mock拦截修改后的返回对象,data变成string类型,显示为...
  • vue 下载本地文件

    千次阅读 2020-04-29 15:16:25
    有时,我们需在在前端项目中下载本地某个地址的文件模块,这个文件不想放在后端去下载。所以,在这个文件大小不是太大的情况下,我们可以把文件放在前端项目目录中,这样不管开发环境还是生产环境,都能在同样的路径...
  • vue js文件

    2019-04-25 17:26:59
    几乎全部的vue js文件都在这个文件夹里,里边有个别文件很难在网站上找到。
  • Vue下载文件

    千次阅读 2019-09-16 17:35:36
    //创建下载的链接 downloadElement . href = href ; downloadElement . download = fileName ; //下载后文件名 document . body . appendChild ( downloadElement ) ; downloadElement . click ( ) ; //...
  • vue学习文档.pdf

    2019-12-10 17:17:50
    vue的学习文档,比较全面。 学习
  • vue 下载多个文件

    千次阅读 2020-01-03 14:44:38
    问题: window.location.href 连续...// 多次下载文件 export function downloadFile(url){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.styl...
  • SpringBoot+Vue实现文件下载

    千次阅读 2019-07-04 15:35:49
    1、前台vue代码,没有使用axios,用的是this.$http.post来实现的 this.$http({ url: this.$http.adornUrl('/stats/importExportUsers/downloadTemplate'), method: 'post', responseType: 'arraybuffer' })....
  • vue blob流下载zip文件

    千次阅读 2019-11-19 13:57:54
    asset_zip(this.delarr).then((res) => { const content = res.data const blob = new Blob([content],{type:"application/zip"}) ...不能用base64转成blob,不然会文件大小对里边没东西,下载其他类型修改type,
  • vue 文件下载

    千次阅读 2020-08-10 09:32:43
    // 自定义文件名 link.click() // 下载文件 URL.revokeObjectURL(objectUrl); // 释放内存 }, (error) => { console.log(error) } ) } 结束语: 希望这篇文章能帮助到大家。 喜欢的加个关注,点个收藏,给个赞~ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 351,472
精华内容 140,588
关键字:

vue下载文件

vue 订阅