vue-----window.open打开新窗口文件并且修改窗口标题&&下载文件

小小黑007

已于 2024-09-03 17:42:06 修改

阅读量616

点赞数 1

文章标签： vue.js javascript 前端

于 2024-09-03 10:15:59 首次发布

本文链接：https://blog.csdn.net/heavenz19/article/details/141854369

版权

vue-----window.open打开新窗口文件并且修改窗口标题&&下载文件

  // 下载word文件
  downloadFile(url, fileName) {
     const xhr = new XMLHttpRequest();
     xhr.open("GET", url, true);
     xhr.responseType = "blob";
     xhr.onload = function () {
       if (xhr.status === 200) {
         const blob = new Blob([xhr.response]);
         const a = document.createElement("a");
         const url = window.URL.createObjectURL(blob);
         a.href = url;
         a.download = fileName;
         a.click();
         window.URL.revokeObjectURL(url);
       }
     };
     xhr.send();
   },
openShowBtn(tag, url, fileName) {
      if (!url) return this.$message.error("文件为空！");
      if (tag === 2) { //打开新窗口
        const win = window.open("about:blank");
        win.document.title = fileName;
        const iframe = document.createElement("iframe");
        iframe.src = url;
        iframe.style.width = "100%";
        iframe.style.height = "100vh";
        iframe.style.margin = "0";
        iframe.style.padding = "0";
        iframe.style.overflow = "hidden";
        iframe.style.border = "none";
        win.document.body.style.margin = "0";
        win.document.body.appendChild(iframe);
      } else if (tag === 3) {//下载文件
        this.downloadFile(url, fileName);
      }
    },