First of all, on the H5 mobile terminal of the mobile phone, for files that can be opened directly, such as pdf, etc., the download is directly opened for preview. If you want to actually save it to your phone, you need to click the three dots in the upper right corner to go there and select Save. For non-preview files, they will be downloaded directly.
In some browsers, the file can be downloaded directly. I feel that this is related to the browser.
I saw that some bloggers said that if you use an absolute path to download , you can download it directly, but I tried it and it didn’t work.
The following are several download methods using iframe, a tag, etc.
// 使用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 })
},