vue 下载图片/视频到浏览器

方法1:直接在当前页面打开图片或者视频

javascript 复制代码
window.location.href = 'url';


//借用a标签实现同样效果
const link = document.createElement('a')
link.href = 'url' // 文件地址
link.click();

方法2:新开一个窗口打开图片或视频

javascript 复制代码
window.open(url);

方法3:下载到浏览器的下载文件夹中,需要手动打开:

代码中有注释,可支持多种文件类型

javascript 复制代码
downLoadFunc(imgSrc, imgName) {
  if (!imgSrc) return;
  fetch(imgSrc, {
     method: "get",
     headers: {
     Authorization: localStorage.getItem("token"),
    },
  }).then(function (response) {
     response.arrayBuffer().then((res) => {
        let type = "image/*";
        // 常见资源类型
        // 1.excel: type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        // 2.图片: type = "image/*"
        // 3.视频: type = "video/*"
        // 4.音频: type = "audio/*"
        // 5.pdf: type = "application/pdf;charset-UTF-8"
        let blob = new Blob([res], { type: type });
        let objectUrl = URL.createObjectURL(blob);
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = objectUrl;
        link.setAttribute("download", imgName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
   });
},

暂时总结,如有问题,欢迎留言一起讨论~

相关推荐
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart1 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记2 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安2 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼2 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
周全全2 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php