docx、pptx、xlsx、pdf文件预览

docx、pptx、xlsx、pdf 文件预览

纯前端预览

pdf 预览

（一）pdf.js 👍🏻

GitHub - mozilla/pdf.js

最新版 pdf.js 要求 node 版本不低于 18，可以在 Tags · mozilla/pdf.js · GitHub 下载 2. 版本

具体可以看 pdf预览 | Hu Yu

（二）iframe

一般的浏览器都默认支持预览 pdf

<iframe src="viewFileUrl" />

但是不同的浏览器的展示和交互不同，而且如果 PDF 文件过大也有可能导致浏览器卡死或者白屏。

docx 预览

Github - VolodymyrBaydalka/docxjs

使用方法：

import { renderAsync } from 'docx-preview'

interface DocxOptions {
  bodyContainer?: HTMLElement | null
  styleContainer?: HTMLElement
  buffer: Blob
  docxOptions?: Partial<Record<string, string | boolean>>
}

export const renderDocx = (options: DocxOptions): Promise<void> | undefined => {
  if (typeof window !== 'undefined') {
    const { bodyContainer, styleContainer, buffer, docxOptions = {} } = options
    const defaultOptions = {
      className: 'docx',
      ignoreLastRenderedPageBreak: false,
    }
    const configuration = Object.assign({}, defaultOptions, docxOptions)
    if (bodyContainer) {
      return renderAsync(buffer, bodyContainer, styleContainer, configuration)
    } else {
      const contain = document.createElement('div')
      document.body.appendChild(contain)
      return renderAsync(buffer, contain, styleContainer, configuration)
    }
  }
}