前端根据文件url路径判断文件预览或者下载以及自定义_前端下载资源并判断资源类型

我们可以创造一个http请求当前地址，那么response header则会返回当前的文件类型，我们可以根据当前的文件类型再做不同的操作

代码实现

/\*\*
 \* 文件下载 或者预览
 \* @param url 
 \* @param fileName 
 \* @param previewTypes 需要预览的文件类型 默认所有类型都是下载 请确保传入正确的MIME 类型或者MIME类型的的主要字段 比如 image/png可传入image
 \* @param customTypes 需要自定义的文件类型 会返回当前文件类型 请确保传入正确的MIME 类型
 \*/
export const downloadOrPreviewFile = (url: string, fileName: string, previewTypes: string[] = [], customTypes: string[] = []): Promise<string> => {
  return new Promise<string>((resolve, reject) => {

    let contentType = "text/plain"
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';

    xhr.onload = function () {
      if (xhr.status === 200) {
        contentType = xhr.getResponseHeader('Content-type');
        //如果找不到自定义的 就走默认的下载或者预览
        const hasCustomType = customTypes.findIndex(item => contentType.includes(item)) > -1
        if (!hasCustomType) {
          var arrayBuffer = xhr.response;
          var blob = new Blob([arrayBuffer], { type: contentType });
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.t

**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**

arget = '\_blank';

          //如果找不到预览 那么就下载
          const hasPreviewType = previewTypes.findIndex(item => contentType.includes(item)) > -1
          if (!hasPreviewType) {
            link.download = fileName;
          }
          link.dispatchEvent(new MouseEvent('click'));
        } else {
          resolve(contentType);
        }
      } else {
        reject(new Error('获取文件失败'));
      }
    };
    xhr.onerror = function () {
      reject(new Error('获取文件失败'));


#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS

* JavaScript

* 前端框架

* 前端性能优化

* 前端监控

* 模块化+项目构建

* 代码管理

* 信息安全

* 网络协议

* 浏览器

* 算法与数据结构

* 团队管理


最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)