vue项目中点击button下载文件到浏览器

最新推荐文章于 2024-09-25 16:25:48 发布

原创最新推荐文章于 2024-09-25 16:25:48 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

在Vue项目中，为解决浏览器直接打开某些文件和下载时的闪动问题，可以创建一个自定义指令`v-downLoad`。该指令用于在后端返回文件URL后，通过创建隐藏的a标签来实现文件的下载。使用步骤包括引入指令、注册指令和在按钮上应用指令。

代码实现

在src 下面的 directive 文件夹下新建目录 down-load-url
down-load-url / index.js文件

    
/*index.js文件
 * 后端返回文件的url,前端创建a标签来下载
 *
 *  1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题,
 *  2. 下载文件时,浏览器会有闪动的问题
 *
 *  页面内使用
 *  1. 引入指令 import downLoad from '@/directive/down-load-url'
 *  2. 注册指令 directives:{downLoad}
 *  3. 使用,在要下载按钮上以指令的形式使用 例如: <el-button v-downLoad="url">下载</el-button>
 */

import downLoad from './downLoad'

const install = function(Vue) {
  Vue.directive('downLoadUrl', downLoad)
}

downLoad.install = install

export default downLoad

3. down-load-url / downLoad.js文件

//downLoad.js
export default {
  bind(el, binding) {
    el.addEventListener('click', () => {
      console.log(binding.value) // url
      const a = document.createElement('a')
      //   let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL
      const url = binding.value // 完整的url则直接使用
      // 这里是将url转成blob地址，
      fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
        a.href = URL.createObjectURL(blob)
        console.log(a.href)
        a.download = '' // 下载文件的名字
        // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
        document.body.appendChild(a)
        a.click()
      })
    })
  }
}

/*
* 后端返回文件的url,前端创建a标签来下载
*
* 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题,
* 2. 下载文件时,浏览器会有闪动的问题
*
* 页面内使用
* 1. 引入指令 import downLoad from '@/directive/down-load-url'
* 2. 注册指令 directives:{downLoad}
* 3. 使用,在要下载按钮上以指令的形式使用例如: <el-button v-downLoad="url">下载</el-button>
*/
----------

使用方式：

1、引入

import downLoad from '@/directive/down-load-url'

2、vue生命周期函数

directives:{
  downLoad //自定义指令
},

3、使用自定义指令下载 worksUrl

<el-button  type="primary" size="mini" v-downLoad="tableData1.worksUrl">下载</el-button>