首先是手机H5移动端上,针对能直接打开的文件例如pdf等,下载是直接打开预览了。如果要真正保存到手机里,需要点击右上角三个点去那里面选择保存。对于非预览文件会直接下载。
而在有些浏览器里,是可以直接下载出文件的。感觉这个与浏览器有关
我看有的博主说,使用绝对路径去下载,可以直接下载下来,但是我试了没效果
以下是用iframe、a标签等几种下载方式。
// 使用iframe下载后端返回的文件流(绝对路径下载)downLoadIframe (item) {let elemIF = document.createElement("iframe")elemIF.src = 'https://www.baidu.cn' + G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`console.log(elemIF.src)elemIF.style.display = "none"document.body.appendChild(elemIF)},// 使用a标签下载后端返回的文件流(绝对路径下载)downloadHttps (item) {const url = 'https://www.baidu.cn' + G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`console.log(url)const a = document.createElement('a')a.href = urla.download = item.fileNamea.click()},downladInvoice (item) {// 可下载,名称也有效 -- 推荐---h5预览页右上角可以保存const x = new window.XMLHttpRequest()x.open('GET', G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`, true)x.responseType = 'blob'x.onload = () => {const url = window.URL.createObjectURL(x.response)const a = document.createElement('a')a.href = urla.download = item.licenseNo + item.policyNo + '.pdf'a.click()}x.send()// ---h5预览页无右上角 但是名称不需要// let elemIF = document.createElement("iframe")// elemIF.src = G_CGI_PHP.invoiceApi.mobileDownInvoice + `?policyId=${item.id}`// console.log(elemIF.src)// elemIF.style.display = "none"// document.body.appendChild(elemIF)},// 使用base64下载downladBase64 (item) {MyGet(G_CGI_PHP.invoiceApi.mobileDownInvoiceBase64 + `?policyId=${item.id}`).then((res) => {if (res.success) {let base64 = this.getBase64Type(res.data.fileType) + res.data.data//拼接成完成的base64console.log('base64', base64)this.downloadFileByBase64(base64, res.data.fileName)} else {Toast(res.return_message)}})},// * desc: 下载方法// * @param url :返回数据的blob对象或链接// * @param fileName :下载后文件名标记downloadFile (url, name = "What's the fuvk") {var a = document.createElement("a")a.setAttribute("href", url)a.setAttribute("download", name)a.setAttribute("target", "_blank")let clickEvent = document.createEvent("MouseEvents")clickEvent.initEvent("click", true, true)a.dispatchEvent(clickEvent)},// * desc: 下载参数入口// * @param base64 :返回数据的blob对象或链接// * @param fileName :下载后文件名标记downloadFileByBase64 (base64, fileName) {var myBlob = this.dataURLtoBlob(base64)var myUrl = URL.createObjectURL(myBlob)this.downloadFile(myUrl, fileName)},//根据文件后缀 获取base64前缀不同 拼接完成的base64getBase64Type (type) {switch (type) {case 'txt': return 'data:text/plain;base64,'case 'doc': return 'data:application/msword;base64,'case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'case 'xls': return 'data:application/vnd.ms-excel;base64,'case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'case 'pdf': return 'data:application/pdf;base64,'case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,'case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,'case 'png': return 'data:image/png;base64,'case 'jpg': return 'data:image/jpeg;base64,'case 'gif': return 'data:image/gif;base64,'case 'svg': return 'data:image/svg+xml;base64,'case 'ico': return 'data:image/x-icon;base64,'case 'bmp': return 'data:image/bmp;base64,'}},//将base64转换为blobdataURLtoBlob (dataurl) {var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], { type: mime })},