yxk-electronic-archives/src/components/renders.js

import { defaultOptions, renderAsync } from 'docx-preview'
import renderPptx from '@/vendors/pptx'
import renderSheet from '@/vendors/xlsx'
import renderOfdView from '@/vendors/ofd'
import renderPdf from '@/vendors/pdf'
import renderImage from '@/vendors/image'
import renderText from '@/vendors/text'
import renderMp4 from '@/vendors/mp4'

// 假装构造一个vue的包装，让上层统一处理销毁和替换节点
const VueWrapper = (el) => ({
  $el: el,
  $destroy() {
    // 什么也不需要 nothing to do
  }
})

const handlers = [
  // 使用docxjs支持，目前效果最好的渲染器
  {
    accepts: ['docx'],
    handler: async(buffer, target) => {
      console.log(defaultOptions)
      const docxOptions = Object.assign(defaultOptions, {
        debug: true,
        experimental: true
      })
      console.log(target)
      await renderAsync(buffer, target, null, docxOptions)
      return VueWrapper(target)
    }
  },
  // 使用pptx2html，已通过默认值更替
  {
    accepts: ['pptx'],
    handler: async(buffer, target) => {
      await renderPptx(buffer, target, null)
      window.dispatchEvent(new Event('resize'))
      return VueWrapper(target)
    }
  },
  // 使用sheetjs + handsontable，无样式
  {
    accepts: ['xlsx'],
    handler: async(buffer, target) => {
      return renderSheet(buffer, target)
    }
  },
  // 使用pdfjs，渲染pdf，效果最好
  {
    accepts: ['pdf'],
    handler: async(buffer, target) => {
      return renderPdf(buffer, target)
    }
  },
  // ofd
  {
    accepts: ['ofd'],
    handler: async(buffer, target) => {
      return renderOfdView(buffer, target)
    }
  },
  // 图片过滤器
  {
    accepts: ['gif', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'png', 'svg'],
    handler: async(buffer, target) => {
      return renderImage(buffer, target)
    }
  },
  // 纯文本预览
  {
    accepts: [
      'txt',
      'json',
      'js',
      'css',
      'java',
      'py',
      'html',
      'jsx',
      'ts',
      'tsx',
      'xml',
      'md',
      'log'
    ],
    handler: async(buffer, target) => {
      return renderText(buffer, target)
    }
  },
  // 视频预览，仅支持MP4
  {
    accepts: ['mp4'],
    handler: async(buffer, target) => {
      renderMp4(buffer, target)
      return VueWrapper(target)
    }
  },
  // 错误处理
  {
    accepts: ['error'],
    handler: async(buffer, target, type) => {
      target.innerHTML = `<div style="text-align: center; margin-top: 80px">不支持.${type}格式的在线预览，请下载后预览或转换为支持的格式</div>
<div style="text-align: center">支持docx, xlsx, pptx, pdf, ofd 以及纯文本格式和各种图片格式的在线预览</div>`
      return VueWrapper(target)
    }
  }
]

// 匹配
export default handlers.reduce((result, { accepts, handler }) => {
  accepts.forEach((type) => (result[type] = handler))
  return result
}, {})