Vue 附件下载及预览

    // type: 1为预览 3为下载
    downloadFile(val, type) {
      this.$http
        .getTemplate(url)
        .then((res) => {
          if (type == 1) {
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(res.data, fileName);
            } else {
              //这里因为没有对返回的数据处理编码格式，所以在预览txt时需要转换成utf-8,不然会乱码
              const data =
                val.fileName.indexOf("txt") !== -1 || val.fileName.indexOf("html") !== -1? new Blob([res.data], {type: "application/json;charset=utf-8",}) : res.data;
              window.open(window.URL.createObjectURL(data));
            }
          } else {
            // 使用Blob
            let blob = new Blob([res.data], { type: res.data.type });
            // 获取heads中的filename文件名
            let downloadElement = document.createElement("a");
            // 创建下载的链接
            let href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            // 下载后文件名
            downloadElement.download = val.fileName;
            document.body.appendChild(downloadElement);
            // 点击下载
            downloadElement.click();
            // 下载完成移除元素
            document.body.removeChild(downloadElement);
            // 释放掉blob对象
          }
        });
    },