【前端文件下载】Js Vue 下载文件的最常用两种方式 |
您所在的位置：网站首页 › 国外常用下载软件 › 【前端文件下载】Js Vue 下载文件的最常用两种方式 |
【前端文件下载】Js Vue 下载文件的最常用两种方式
|
目录 1、第一种 文件流格式下载 2、通过静态url去实现下载 目前 前端下载文件最常用的有以下两种方式： （1）通过接收后端返回的文件流格式（Blob数据） 去下载 （2）通过接收后端给的文件url地址去下载 1、第一种 文件流格式下载这种情况通常是 我们前端 向后端发起下载请求 ，后端接收到之后 会返回文件流格式（Blob数据）的代码，然后我们通过new Blob() 方法传入Blob数据 ,接着把得到的数据传入window.URL.createObjectURL（） 最后得到url。我们创建一个a标签，然后将url赋值给a标签的href,接着使用link.setAttribute（）方法 设置文件名称，将设置的link数据添加的a标签节点上 link.click();触发点击事件,最后移除a标签上的link /** * * @param {*} data 文件数据 * @param {*} fileName 文件名称 * @param {*} fileFormat 文件格式 * @returns */ export default function exportDownload(data, fileName = '导出文件', fileFormat = 'xlsx') { // data为Blob数据 if (!data) { return; } // 执行下载 const url = window.URL.createObjectURL(new Blob([data])); console.log(url); const link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', `${fileName}.${fileFormat}`); document.body.appendChild(link); link.click(); document.body.removeChild(link); } 2、通过静态url去实现下载这种方式，同样我也是用a标签去实现的，首先是创建一个a标签 const elt = document.createElement('a'); 接着设置a标签上的href属性 传入url,以及download 属性传入文件名称，将设置的link数据添加的a标签节点上 link.click();触发点击事件,最后移除a标签上的link /** * * @param {*} url 文件路径 * @param {*} name 文件路径 * @returns */ export default function downloadFile(url, name) { const elt = document.createElement('a'); elt.setAttribute('href', fileDownload(url)); elt.setAttribute('download', name); elt.style.display = 'none'; document.body.appendChild(elt); elt.click(); document.body.removeChild(elt); }
|
【本文地址】
今日新闻 |
推荐新闻 |