前端几种下载文件的方式(url方式和文件流方式)

您所在的位置：网站首页 › 前端下载本地文件怎么下载到桌面上 › 前端几种下载文件的方式(url方式和文件流方式)

前端几种下载文件的方式(url方式和文件流方式)

2024-07-10 23:18| 来源: 网络整理| 查看: 265

前端实现下载功能是依赖于浏览器特性，而非JS特性

第一种 a标签

前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性这种写法是创造了一个a标签，把地址写到a标签里再用js调用点击，实现访问文件地址就是下载了代码如下:

html 下载 // 参数分别是：文件的路径文件的名字文件的id 文件的类型 js downloadFile(url, fileName, flieId, type) { let link = document.createElement('a'); link.style.display = 'none'; link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId; document.body.appendChild(link); link.click(); }, 或者下载模板 //另一种情况是创建div标签，动态创建a标签：下载 function downloadExcel() { let a = document.createElement('a') a.href ="/xxx/xxx" a.click(); } 直接下载

a标签的href属性指定下载文件的路径,需要给a标签添加一个download属性，download指定下载文件保存时的名称。

下载第二种通过window.open()下载

window.open就是打开了一个新网页直接在新网页访问文件地址了，只要访问文件地址，就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了

downloadFile() { window.open( baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc', '_self' ); }, 第三种通过创建iframe的方式导出 //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格式，这种写法对于图片和pdf及svg能实现下载功能 $http({ url: this.$http.adornUrl(`/strUrl/${id}`), method: 'get', responseType: 'blob', timeout: 1000 * 600 }).then(res => { console.log('res', res) if (res.status === 200) { const blob = new Blob([res.data], { type: `application/octet-stream` }) const downloadElement = document.createElement('a') const href = window.URL.createObjectURL(blob) downloadElement.href = href downloadElement.download = `${filename}` downloadElement.click() } else { Elmessage.error('下载出错!') } }) 项目中使用封装dowanload.js/ts写入下面代码 const download0 = (data: Blob, fileName: string, mineType: string) => { // 创建 blob const blob = new Blob([data], { type: mineType }) // 创建 href 超链接，点击进行下载 window.URL = window.URL || window.webkitURL const href = URL.createObjectURL(blob) const downA = document.createElement('a') downA.href = href downA.download = fileName downA.click() // 销毁超连接 window.URL.revokeObjectURL(href) } const download = { // 下载 Excel 方法 excel: (data: Blob, fileName: string) => { download0(data, fileName, 'application/vnd.ms-excel') }, // 下载 Word 方法 word: (data: Blob, fileName: string) => { download0(data, fileName, 'application/msword') }, // 下载 Zip 方法 zip: (data: Blob, fileName: string) => { download0(data, fileName, 'application/zip') }, // 下载 Html 方法 html: (data: Blob, fileName: string) => { download0(data, fileName, 'text/html') }, // 下载 Markdown 方法 markdown: (data: Blob, fileName: string) => { download0(data, fileName, 'text/markdown') } } export default download 页面使用需要后端接口配合 import download from '@/utils/download' //导出 const exportdownload = async () => { let params = { projectId: projectId.value, gameServerCode: rowInfo.value.code, invitationId: invitationId.value, code: invitationcode.value, userId: operator.value } const data = await exportList(params) download.excel(data, '运营邀请码.xls') }

【本文地址】

前端几种下载文件的方式(url方式和文件流方式)

前端几种下载文件的方式(url方式和文件流方式)

今日新闻

推荐新闻