网站分为哪些部分组成部分,网站出售,建设个人信息网站,十大app排行榜参考文章1 参考文章2 以下的下载是#xff0c;拿到了后端给的下载图片的接口地址url 方法1#xff1a;将文本或者JS字符串通过 Blob 转换成二进制下载 优点#xff1a;可以下载#xff0c;也可以保存名称。 //文件流参数和图片名称
function downloadTxt(str, filenam…参考文章1 参考文章2 以下的下载是拿到了后端给的下载图片的接口地址url 方法1将文本或者JS字符串通过 Blob 转换成二进制下载 优点可以下载也可以保存名称。 //文件流参数和图片名称
function downloadTxt(str, filename){let a document.createElement(a)a.download filenamea.style.display nonelet blob new Blob([str])a.href URL.createObjectURL(blob)document.body.appendChild(a)a.dispatchEvent(new MouseEvent(click))document.body.removeChild(a)
} 方法2原生的下载方法 优点可以下载也可以保存名称。 推荐 downLoadFileImg (fileUrl, fileName) {// fileUrl -- 后端下载地址 可能是拼接了文件id, fileName -- 下载文件名称// 可以下载 没名称// location.href fileUrl// 可以下载 但是名称设置无效// let a document.createElement(a)// a.download fileName// a.href fileUrl// a.dispatchEvent(new MouseEvent(click))// 名称设置有效但是下载文件打不开// // let a document.createElement(a)// // a.download fileName //图片名称// // a.style.display none// // let blob new Blob([fileUrl]) //图片地址// // a.href URL.createObjectURL(blob)// // document.body.appendChild(a)// // a.dispatchEvent(new MouseEvent(click))// // document.body.removeChild(a)// 会打开新的页面下载 但是没名称// const newWindow window.open()// newWindow.document.write(// iframe width100% height100% src fileUrl // frameborder0 allowfullscreen/iframe// )// newWindow.document.title fileName// 可下载名称也有效 -- 推荐const x new window.XMLHttpRequest()x.open(GET, fileUrl, true)x.responseType blobx.onload () {const url window.URL.createObjectURL(x.response)const a document.createElement(a)a.href urla.download fileNamea.click()}x.send()},方法3a标签下载 a标签html5版本新增了download属性用来告诉浏览器下载该url而不是导航到它可以带属性值用来作为保存文件时的文件名尽管说有同源限制但是我实际测试时非同源的也是可以下载的。 对于没有设置Content-Disposition响应头或者设置为inline的图片来说因为图片对于浏览器来说是属于能打开的文件所以并不会触发下载而是直接打开浏览器不能预览的文件无论有没有Content-Disposition头都会触发保存 其中href是下载地址download是下载名称 href 的下载地址 和 当前网站地址 必须是 同源的 否则download名称不生效。 a href../../static/demo.jpg downloaddemo.jpg target_blankdemo.jpg/a!-- 直接打开 --
a href/test.jpg downloadtest.jpg target_blankjpg静态资源/a
!-- 触发保存 --
a href/test.zip downloadtest.pdf target_blankzip静态资源/a
!-- 触发保存 --
a hrefhttps://www.7-zip.org/a/7z1900-x64.exe downloadtest.zip target_blank三方exe静态资源/a
!-- 直接打开 --
a href/createQrCode?texthttp://lxqnsys.com/ download target_blank二维码流/a
!-- 直接打开 --
a href/getFileStream?nametest.jpg download target_blankjpg流/a
!-- 触发保存 --
a href/getFileStream?nametest.zip download target_blankzip流/a
!-- 触发保存 --
a href/getAttachmentFileStream?nametest.jpg download target_blank附件jpg流/a
!-- 触发保存 --
a href/getAttachmentFileStream?nametest.zip download target_blank附件zip流/a方法4a标签方式类似的还可以使用location.href 这2、3种方式的缺点也很明显一是不支持post等其他方式的请求二是需要后端支持 location.href /test.jpg还有其他的下载方式可以参考原文链接
