实现文件预览的多种方式(office, image, pdf)

qq_39558298

已于 2022-11-04 14:01:11 修改

阅读量454

点赞数

文章标签：前端 java

于 2022-11-04 12:26:08 首次发布

本文链接：https://blog.csdn.net/qq_39558298/article/details/127686024

版权

实现文件预览的多种方式(office, image, pdf)

使用 xdoc 文档预览云服务, 直达链接

使用方式 http://view.xdocin.com/xdoc?_xdoc=文件全路径

使用微软开放的 office 预览 api, 直达链接

使用方式 https://view.officeapps.live.com/op/view.aspx?src=文件全路径

不过使用这种方法只能预览 office 系列文件, 可以配合下面的方法进行使用

/**
 * 预览文件
 * @param url
 */
function previewOffice(url) {
  if (strIsNull(url)) {
    console.log("预览文件:::url为空");
    return;
  }

  // 默认认为文件类型是 office , 调用 officeapps 提供的 api
  let showUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + url;

  if (fileIsImg(url) || fileIsPdf(url)) {
    // 如果是图片或者pdf直接预览
    showUrl = url;
  }
  // 模拟 a 标签点击
  let link = document.createElement('a');

  link.href = showUrl;
  link.style.display = "none";
  link.target = "_blank";

  link.click();
}

/**
 * 判断文件是否为图片
 * @param path
 * @returns {boolean} true 该文件路径下的文件为图片
 */
export function fileIsImg(path) {
  if (!path) {
    return false;
  }
  let suffix = path.substr(path.lastIndexOf(".") + 1);

  return IMG_SUFFIX.indexOf(suffix.toLowerCase()) !== -1;
}

/**
 * 判断文件是否为 pdf
 * @param path
 * @returns {boolean} true 是 pdf 文件
 */
export function fileIsPdf(path) {
  if (!path) {
    return false;
  }
  let suffix = path.substr(path.lastIndexOf(".") + 1);

  return PDF === suffix.toLowerCase();
}

/**
 * 判断字符串是否为空
 * @param str
 * @returns {boolean} true 为空或空串
 */
export function strIsNull(str) {
  return !str || str.length === 0;
}

/**
 * 图片文件后缀名集合
 * @type {string[]}
 */
const IMG_SUFFIX = ["png", "jpg", "jpeg", "gif"];
/**
 * pdf 格式文件
 * @type {string}
 */
const PDF = "pdf";