浏览器（PC、移动端）文件下载
-
index.html 同目录下放一个doc.docx文件，使用live-server开启服务即可测试使用效果。
-
index.html：
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>基于eruda的手机端网页的调试-浏览器（PC、移动端）文件下载</title>
<!-- 基于eruda的手机端网页的调试 -->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
</script>
<script>
function downByBlob_1(parameters) {
// 下载地址改为对应的下载地址
var downloadURL = "https://pcrsk.csb.app/doc.docx?FileName=zip.rar";
let xhr = new XMLHttpRequest();
let fileName = "doc.docx"; // 文件名称 需要自己判断添加文件类型后缀
// let fileName = '' // 文件名称 会加上默认文件类型后缀
xhr.open("GET", downloadURL, true);
xhr.responseType = "arraybuffer";
//xhr.setRequestHeader('xx', 'xxxxx') // 请求头中添加信息
xhr.onload = function () {
if (this.status === 200) {
let type = xhr.getResponseHeader("Content-Type");
let blob = new Blob([this.response], { type: type });
if (typeof window.navigator.msSaveBlob !== "undefined") {
/*
* IE workaround for "HTML7007: One or more blob URLs were revoked by closing
* the blob for which they were created. These URLs will no longer resolve as
* the data backing the URL has been freed."
*/
window.navigator.msSaveBlob(blob, fileName);
} else {
let URL = window.URL || window.webkitURL;
let objectUrl = URL.createObjectURL(blob);
console.log(objectUrl);
//"blob:http://localhost:10614/3e48b856-fca6-4e4c-b780-1c4a7066f42e"
if (fileName) {
var a = document.createElement("a");
// safari doesn't support this yet
if (typeof a.download === "undefined") {
window.location = objectUrl;
} else {
a.href = objectUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
a.remove();
}
} else {
window.location = objectUrl;
}
}
}
};
xhr.send();
}
</script>
</head>
<body>
<div onclick="downByBlob_1()">
click download
</div>
</body>
</html>
基于eruda的手机端网页的调试
- 在HTML文件中添加如下代码即可
<head>
<!-- 基于eruda的手机端网页的调试 -->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</head>
参考链接：
基于eruda的手机端网页的调试-浏览器（PC、移动端）文件下载
https://pcrsk.csb.app/downloadFile.html
基于eruda的手机端网页的调试https://blog.csdn.net/u011456337/article/details/51594765
兼容移动端、PC端 用绝对地址进行下载https://blog.csdn.net/weixin_41648985/article/details/110921100
这里的查看方式其实是在iOS或者ANDRIOD提供的webview中操作的，而webview不支持以链接形式打开图片以外的附件
https://segmentfault.com/q/1010000010039966
h5页面怎么处理文件流_H5页面实现下载文件（apk、txt等）的三种方式https://blog.csdn.net/weixin_29290963/article/details/113001442
利用Html5的Blob对象实现对文件流进行下载 https://www.cnblogs.com/willingtolove/p/10686208.html#_label6
网友评论