前端实现下载文件或者下载视频

最新推荐文章于 2024-04-26 17:18:27 发布

墨柒柒

最新推荐文章于 2024-04-26 17:18:27 发布

阅读量2.3k

点赞数 1

文章标签：前端 vue.js vue javascript ajax

本文链接：https://blog.csdn.net/m0_53101857/article/details/124411684

版权

下载功能相比大家已经不陌生了吧

这都是基本常规操作啦！直接上代码

一. 文件下载

1. 先写好下载的方法

export default function getDownloadData(content, name) {
  const blob = new Blob([content])
  if ('download' in document.createElement('a')) {
    // 非IE下载
    const elink = document.createElement('a')
    elink.download = name
    elink.style.display = 'none'
    elink.href = window.URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)  // 释放URL对象
    document.body.removeChild(elink)
  } else {
    
    // IE10+ 下载
    navigator.MsSaveBlob(blob, name)
  }

}

2.在页面中使用

<div @click="clickDownloadFile(item)">下载</div>

import {downloadFile} from '@/api/api.js'  // 引入下载接口 
import download from '@/utils/download.js'  // 引入写好的下载方法