Vue 简版文件预览笔记

最新推荐文章于 2023-10-02 21:07:41 发布

mrhaoxiaojun

最新推荐文章于 2023-10-02 21:07:41 发布

阅读量486

点赞数

分类专栏： Vue 文章标签： vue.js 笔记 javascript

本文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/132119197

版权

Vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

简版文件预览笔记

调用方法

<script lang="ts" setup>
  import {
    exportFileData,
    preViewFile,
  } from '@/xxx/tools.ts';
  import {
    fileDownload,
  } from '@/api/xxx/xx';
  // 预览方法
  const handleViewBtn = () => {

    const filePath = 获取预览地址;
    const urlFormat = 获取预览地址的扩展名（xxx.toLowerCase()）

    // 这里是预览接口请求，具体根据自己的接口来定
    fileDownload({ filePath }).then((res: any) => {
      // 导出的预览数据和预览类型
      let {filePathData , viewType} = exportFileData(res.data, urlFormat);
      switch (viewType) {
        case 'img':
          const imgObj: any = preViewFile('', '_blank', 1000, 700);
          imgObj.document.write(
            `<!DOCTYPE html><html><body><img src='${filePathData}' style='height:100%;width:100%'/></body></html>`
          );
          break;
        case 'txt':
          const txtObj: any = preViewFile('', '_blank', 1000, 700);
          txtObj.document.write(
            `<iframe src="${filePathData}" width="100%" height="100%" frameborder="0"> </iframe>`
          );
          break;
        case 'pdf_ppt_doc_xls':
          preViewFile(filePathData, '_blank', 1000, 700);
          break;
        default:
          console.log('没匹配到');
          break;
      }

    });
  };
</script>

公共方法

/**
 * @description: 预览文档时新打开窗口的样式
 * @param {string} url 预览地址
 * @param {string} name 名称
 * @param {number} w 宽度
 * @param {number} h 高度
 * @param {string} type 打开的类型  是pdf  还是图片  txt
 * @return {*}
 */
export const preViewFile = (url: string, name: string, w: number, h: number) => {
  const iTop = (window.screen.availHeight - 30 - h) / 2;
  // const iLeft = (window.screen.availWidth - 10 - w) / 2;
  const iLeft = (window.screenX || window.screenLeft || 0) + (screen.width - w) / 2;
  const newwindow: any = window.open(
    url,
    name,
    `height=${h},innerHeight=${h},width=${w},innerWidth=${w}, top=${iTop},left=${iLeft},titlebar=no, directions=no, toolbar=no, menubar=no, scrollbars=yes, resizeable=no, location=no, status=no`
  );

  return newwindow;
};

/**
 * @description: 二进制流对应的预览格式
 * @param {string} data 二进制流数据
 * @param {string} fileType 文件类型
 * @return {*}
 */
export const exportFileData = (data: any, fileType: string) => {
  const formatList = fileFormat();
  let type = '';
  let fileURL: any = '';
  let viewType = ''

  for (const key in formatList) {
    if (key === fileType) {
      type = key;
    }
  }
  if (['png', 'jpeg', 'gif', 'bmp', 'jfif', 'jpg'].includes(type)) {
    fileURL = window.URL.createObjectURL(data); // 将查出的数据转换为图片路径
    viewType = 'img'
  } else if (['txt'].includes(type)) {
    const blob = new Blob([data], {
      type: `${formatList[type]}`,
    });
    fileURL = window.URL.createObjectURL(blob);
    viewType = 'txt'
  } else if (['xls', 'xlsx', 'doc', 'docx', 'pdf', 'pptx'].includes(type)) {
    const blob = new Blob([data], {
      type: 'application/pdf;chartset=UTF-8',
    });
    fileURL = window.URL.createObjectURL(blob);
    viewType = 'pdf_ppt_doc_xls'
  } else {
    fileURL = '';
  }
  return {fileURL,viewType};
};


/**
 * @description: 文档下载根据上传类型 对应下载文档的后缀
 */
export const fileFormat = () => {
  return {
    xls: 'application/vnd.ms-excel',
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    doc: 'application/msword',
    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    pdf: 'application/pdf',
    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    png: 'image/png',
    gif: 'image/gif',
    jpeg: 'image/jpeg',
    jpg: 'image/jpeg',
    bmp: 'image/bmp',
    tif: 'tif',
    tiff: 'image/tiff',
    txt: 'text/plain',
    jfif: 'jfif',
  };
};