javascript指什么 (javascript下载文件五种方式)

前言整顿javascript下载文件五种方式，接纳后盾前往流下载或间接下载文件，欢迎补充~业务场景假定经事先端接口前往的流，须要前端点击，下载到本地，按钮下载文件，一.window.location.href下载leturl=http，10.0.0.103，6767，file，downloadFilewindow.location...。

前言

整顿javascript下载文件五种方式，接纳后盾前往流下载或间接下载文件。欢迎补充~

业务场景

假定经事先端接口前往的流，须要前端点击【下载到本地】按钮下载文件。

一.window.location.href下载

let url'http://10.0.0.103:6767/file/downloadFile'
windowlocationhref  url

缺陷：
1.间接访问或许会笼罩以后页面地址，影响用户体验。
2.图片、pdf 等url资源会体现为预览而非下载。

二.window.open()下载

let url'http://10.0.0.103:6767/file/downloadFile'
windowopenurl

缺陷：
这个方法只能将指定门路的资源加载到阅读器外面，假设文件不能被阅读器阅读，那就会被阅读器下载到本地。反之，假设下载一个txt文本，用该方法会间接预览txt文件。

三.iframe 下载

elbutton size"mini" @click"handleExport(item)"导出elbutton
function handleExportitem try let url'http://10.0.0.103:6767/file/downloadFile'let elementIftrame  documentcreateElement"iframe"elementIFsrc  urlelementIFstyledisplay  "none"documentbodyappendChildelementIftramecatcherror consolelogerror

四.【灵活a标签】联合【axios方法】的方式下载

1.若/getZipInfo接口没有登录校验，就不用下载文件流转成blob数据。

let curHostwindowlocationhost
let fileNamemodule_20230920.zip
let urlcurHost/service/getZipInfo?fileName=fileName
// 创立下载按钮a标签启动智能点击下载，下载完后移除按钮a标签
let downloadDomdocumentcreateElement'a'
downloadDomhrefurl
// downloadDom.download=fileName //--不是必定 若须要【前端重命名文件夹】的话这句代码就须要
documentbodyappendChilddownloadDom
downloadDomclick
documentbodyremoveChilddownloadDom

2.若/getZipInfo接口有登录校验，就须要把下载文件流转成blob数据再下载，res为文件流

let fileNamemodule_20230920.zip
let blobnew Blobrestype'application/octet-stream'
let hrefwindowURLcreateObjectURLblob
// 创立下载按钮a标签启动智能点击下载，下载完后移除按钮a标签
let downloadDomdocumentcreateElement'a'
downloadDomhrefhref
downloadDomdownloadfileName //--不是必定 若须要【前端重命名文件夹】的话这句代码就须要
documentbodyappendChilddownloadDom
downloadDomclick
documentbodyremoveChilddownloadDom
windowURLrevokeObjectURLhref

五.form表单的方式下载【比拟少用到，自创他人的方法】

function handleExport let url'http://10.0.0.103:6767/file/downloadFile'var form  "<form>"formattr"style" "display:none"/**target 属性规则一个称号或一个关键词，批示在何处关上 action URL，* 即在何处显示提交表单后接纳到的照应。**_blank 在新窗口/选项卡中关上。*_self 在同一框架中关上。（自动）*_parent 在父框架中关上。*_top 在整个窗口中关上。*framename 在指定的 iframe 中关上。*/formattr"target" "_self"formattr"method" "get"formattr"action" url"body"appendform// 提交formsubmit

留意： 若下载的文件包解压时须要明码的话，前后端生成的文件名必定分歧能力解压，否则不可会造成解压失败。

转载请注明原作者
不喜勿喷，欢迎补充~~

正文