我们来看下效果演示:
条件假设:
-
首先得有一个下载文档的接口,我们假设这个接口的地址是myurl
-
其次我们一般使用token来区分用户是否有权下载,假设令牌为token
html部分比较简单
<button type="button" id="test">下载</button>
JS部分(这里假设你引用了jquery)
$(function() {
function download(filename) {
var oReq = new XMLHttpRequest();
oReq.open("GET", myurl, true); /*链接地址后续要修改,改成你要下载的文档地址,也就是接口地址*/
oReq.responseType = "blob";
oReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
oReq.setRequestHeader("Authorization",token); /*token为身份令牌,看你的接口是否需要,若不需要删除这一行即可*/
oReq.onload = function (oEvent) {
var content = oReq.response;
var elink = document.createElement('a');
elink.download = filename;
elink.style.display = 'none';
var blob = new Blob([content], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); /*type的这个定义文档下载为excel格式*/
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
};
oReq.send();
}
$(document).on("click", "#test", function() {
download("test");
}
参考文章:
实际结果问题的:
https://www.cnblogs.com/sunweinan/p/excel.html
https://www.cnblogs.com/soyxiaobi/p/9362516.html
解释的很清楚的:
https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/