前端预览和下载文件

在utiles/index封装方法

import axios from "axios";
import { getToken } from "@/utils/auth"; //自己定义获取token的方法

// 根据文件名后缀区分 文件类型
export function getType(fileName) {
  // 后缀获取
  var suffix = '';
  // 获取类型结果
  var result = '';
  try {
    var flieArr = fileName.split('.');
    suffix = flieArr[flieArr.length - 1];
  } catch (err) {
    suffix = '';
  }
  // fileName无后缀返回 false
  if (!suffix) {
    result = false;
    return result;
  }
  // 图片格式
  var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
  // 进行图片匹配
  result = imglist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'image';
    return result;
  };
  // 匹配txt
  var txtlist = ['txt'];
  result = txtlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'txt';
    return result;
  };
  // 匹配 excel
  var excelist = ['xls', 'xlsx'];
  result = excelist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'excel';
    return result;
  };
  // 匹配 word
  var wordlist = ['doc', 'docx'];
  result = wordlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'word';
    return result;
  };
  // 匹配 pdf
  var pdflist = ['pdf'];
  result = pdflist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'pdf';
    return result;
  };
  // 匹配 ppt
  var pptlist = ['ppt'];
  result = pptlist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'ppt';
    return result;
  };
  // 匹配 视频
  var videolist = ['mp4', 'm2v', 'mkv'];
  result = videolist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'video';
    return result;
  };
  // 匹配 音频
  var radiolist = ['mp3', 'wav', 'wmv'];
  result = radiolist.some(function (item) {
    return item == suffix;
  });
  if (result) {
    result = 'radio';
    return result;
  }
  // 其他 文件类型
  result = 'other';
  return result;
}
//跨域查看或下载文件,type有值并且只有文件类型是pdf的时候能在浏览器预览
export function down_loadfile(link, name, type) {
  let url = link;
  let fileType = ''
  if (getType(url) == "pdf") {
    fileType = "application/pdf";
  }
  axios
    .get(url, {
      responseType: "blob",
      headers: { Authorization: "Bearer " + getToken() },
    })
    .then((res) => {
      const blob = new Blob([res.data], { type: fileType })
      // 注: mime类型必须整正确, 否则下载的文件会损坏
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // 兼容IE
        window.navigator.msSaveOrOpenBlob(blob, element.original_name);
      } else {
        if (fileType && type) {
          let showFile = window.URL.createObjectURL(blob);
          window.open(showFile);   //查看功能需要浏览器打开
        } else {
          let downloadElement = document.createElement("a");
          downloadElement.href = window.URL.createObjectURL(blob); // 创建一个DOMString
          downloadElement.download = name;
          downloadElement.click();
          window.URL.revokeObjectURL(blob); // 释放 DOMString  ,解除内存占用
        }
      }
    })
    .catch((error) => {
      console.error(error);
    });
}

在使用的页面上引用

import {down_loadfile} from "@/utils/index";

methods: {  
openFile(link, name) {
      down_loadfile(link, name,1);
    },
 }

1.第三个参数type不传值的时候只下载。

2.只有pdf文件格式能在浏览器里预览，其他格式 只能下载。

3.  headers: { Authorization: "Bearer " + getToken() }里getToken()是获取的自己本地的token。