本文所讲的下载地址格式为:地址+文件名(例如:http...+ 'test.docx')
页面代码:
<!--map为所下载的文件信息,包括文件名、路径等 -->
<p v-down="map">这是文件名</p>
js代码: (在main.js中写入以下代码)
注:方法一 前端不需要考虑跨域问题,后台设置允许就行
方法二 单独设置文件名无效,默认下载文件名为上传服务器后所返回的地址里的命名(一般会为uuid的格式,非文件原名),若大家有解决方法可以留言给博主
let baseDownloadUrl = "http://192.xxx.x.xxx:8090/"; // 域名+端口号
// 添加自定义v-down指令
Vue.directive("down", {inserted: (el, binding) => {el.style.cssText = "cursor: pointer;";el.addEventListener("click", () => {//方法一var xz = new XMLHttpRequest();xz.open("GET", baseDownloadUrl + binding.value.path, true);xz.responseType = "blob";xz.onload = function (e) {var url = window.URL.createObjectURL(xz.response);var a = document.createElement("a");a.href = url;a.download = binding.value.fileName;a.click();};x.send();//方法二// let link = document.createElement("a"); // 创建a标签// link.style.display = "none";// link.href = baseDownloadUrl + binding.value.path; // 设置下载地址// link.setAttribute("download", binding.value.fileName); // 添加downLoad属性// link.setAttribute("target", "_blank");// document.body.appendChild(link);// link.click();});},
});