移动端H5⽂件下载(ios、isAndroid)
思路:本章内容包括移动端(ios、isAndroid)、web端;
移动端必须需要后台返回http⽂件路径,isAndroid可以直接跳转浏览器下载,ios需要⽤户⼿动复制链接,然后去浏览器下载,web端⽂件不管是 流 还是http路径都可以下载
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
if (isAndroid) {
// 安卓终端使⽤iframe
window.open(item.url);
} else if (isiOS) {
Dialog.alert({
title: '请复制链接⾄浏览器下载',
document有安卓版吗message: item.url,
confirmButtonText: '复制',
}).then(() => {
clipBoard(item.url);
});
} else {
1.如果是地址
window.open(item.url);
2.如果是⽂件流
// 浏览器
const aEle = ateElement('a');
aEle.href = ateObjectURL(blob);
if (!filename) {
// 没传⽂件名,就⽤后台的filename,后台也没有传就。。。。
filename = res.headers['content-disposition'].split('filename=')[1];
filename = decodeURIComponent(filename || '');
}
aEle.download = filename;
aEle.click();
vokeObjectURL(aEle.href);
}
⼿动复制链接⽅法:
1.利⽤input标签和Command相结合
const input = ateElement('input');
document.body.appendChild(input);
input.value = text;
input.select();
2.Clipboard
安装依赖 npm install clipboard
// 在要使⽤的组件⾥引⼊
import Clipboard from 'clipboard' // 复制功能
<div @click="linkTap($event,link)">复制链接</div>
// 复制链接
linkTap(e, text) {
const clipboard = new Clipboard(e.target, { text: () => text }) ('success', e => {
Toast('复制成功')
})
},
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论