工作中碰见需要实现在线预览和文件打包下载的功能,搜索查看了一些文章和代码后整理了一套实现方案,方便可直接复制使用。

文件判断 fileType.js

/**判断文件格式
 * @param fileUrl
 */
export function fileTypeByUrl(url) {
  // 后缀获取
  let suffix = "";
  // 获取类型结果
  let result = "";
  try {
    const flieArr = url.split(".");
    suffix = flieArr[flieArr.length - 1];
  } catch (err) {
    suffix = "";
  }
  // fileName无后缀返回 false
  if (!suffix) {
    return false;
  }
  suffix = suffix.toLocaleLowerCase();
  // 图片格式
  const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
  // 进行图片匹配
  result = imglist.find((item) => item === suffix);
  if (result) {
    return "image";
  }
  // 匹配txt
  const txtlist = ["txt"];
  result = txtlist.find((item) => item === suffix);
  if (result) {
    return "txt";
  }
  // 匹配 excel
  const excelist = ["xls", "xlsx"];
  result = excelist.find((item) => item === suffix);
  if (result) {
    return "excel";
  }
  // 匹配 word
  const wordlist = ["doc", "docx"];
  result = wordlist.find((item) => item === suffix);
  if (result) {
    return "word";
  }
  // 匹配 pdf
  const pdflist = ["pdf"];
  result = pdflist.find((item) => item === suffix);
  if (result) {
    return "pdf";
  }
  // 匹配 ppt
  const pptlist = ["ppt", "pptx"];
  result = pptlist.find((item) => item === suffix);
  if (result) {
    return "ppt";
  }
  // 匹配 视频
  const videolist = [
    "mp4",
    "m2v",
    "mkv",
    "rmvb",
    "wmv",
    "avi",
    "flv",
    "mov",
    "m4v",
  ];
  result = videolist.find((item) => item === suffix);
  if (result) {
    return "video";
  }
  // 匹配 音频
  const radiolist = ["mp3", "wav", "wmv"];
  result = radiolist.find((item) => item === suffix);
  if (result) {
    return "radio";
  }
  // 其他 文件类型
  return "other";
}

在线预览

1. 在线预览word/excel用微软链接+Url,图片和PDF可直接网页打开

function preview(url) {
  let type = fileUrl(url);
  if (type == "word" || type == "excel") {
    window.open(`https://view.officeapps.live.com/op/view.aspx?src=${url}`);
  } else if (type == "pdf") {
    window.open(url);
  } else if (type == "image") {
    window.open(url);
  }
}

根据URL实现打包下载

需求模块，需引入

• JsZip
• jszip-utils
• file-saver

import { saveAs } from 'file-saver';
import jsZip from 'JsZip';
import JSZipUtils from 'jszip-utils';

  let zip = new jsZip();
      let progress = 0;
      fileList.forEach((e, i) => {
        let _this = this;
        JSZipUtils.getBinaryContent(
          e.URL,
          function (err, binData) {
            zip.file(e.assessmentCompanyFileName, binData, { binary: true });
            ++progress;
            if (progress === _this.fileList.length ) {
              zip.generateAsync({ type: "blob" }).then(function (content) {
                // see FileSaver.js
                saveAs(content, "all.zip");
              });
            }
          }
        );
      });