首先是手机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 = url
a.download = item.fileName
a.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 = url
a.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//拼接成完成的base64
console.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前缀不同 拼接完成的base64
getBase64Type (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转换为blob
dataURLtoBlob (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 })
},