文件预览(pdf word excel ppt等)

前提:都是通过接口获取到的文件流,然后通过以上window.URL.createObjectURL方法将转成url传给组件

  1. @cyntler/react-doc-viewer

通过支持的文件类型可知word、excel、ppt类的有局限性

  1. react-file-viewer
  • docx的文件支持预览,无局限性
  • 应该是xlsx吧? 它的官网写的是xslx,但是无法预览
  1. docx-preview

这个预览docx的效果比react-file-viewer要好

  1. react-excel-renderer

支持xlsxxlscsv

此组件不能直接用于预览,而是拿到文件信息,将其转成二维数组,手动进行渲染,代码如下:

js 复制代码
import React, { useEffect, useState } from 'react'
import { ExcelRenderer } from 'react-excel-renderer'

export default function ExcelViewer(file) {
  const [rows, setRows] = useState([])
  const [cols, setCols] = useState([])

  const handleFile = (file) => {
    ExcelRenderer(file, (err, resp) => {
      if (err) {
        console.error(err)
      } else {
        setCols(resp.cols)
        setRows(resp.rows)
      }
    })
  }

  useEffect(() => {
    if (file) {
      handleFile(file.file)
    }
  }, [file])

  return (
    <div>
      {rows.length > 0 && (
        <div style={{ overflowX: 'auto', marginTop: '20px' }}>
          <table style={{ borderCollapse: 'collapse', width: '100%' }}>
            <thead>
              <tr>
                {cols.map((col, index) => (
                  <th key={index} style={{ border: '1px solid #ddd', padding: '8px' }}>
                    {col.name}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, rowIndex) => (
                <tr key={rowIndex}>
                  {row.map((cell, cellIndex) => (
                    <td key={cellIndex} style={{ border: '1px solid #ddd', padding: '8px' }}>
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}

弊端:样式不空,对于合并单元格以及一些内部样式(链接、字体等)无法进行拿到其信息,也就无法渲染,只能是简单的显示内容,如下图

  1. pptx2html

ppt的预览无法直接通过纯前端实现,可以采用前后端结合的方式实现,后端通过nodeJs + pptx2html,将ppt文件转成html,返回给前端进行渲染

后端示例(Node.js + pptx2html

js 复制代码
const express = require('express');
const pptx2html = require('pptx2html');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/api/parse-pptx', upload.single('pptx'), async (req, res) => {
  const result = await pptx2html(req.file.path);
  res.json(result.slides);
});

前端示例

jsx 复制代码
function PPTXViewer() {
  const [slides, setSlides] = useState([]);

  const handleUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('pptx', file);

    const response = await fetch('/api/parse-pptx', {
      method: 'POST',
      body: formData
    });
    setSlides(await response.json());
  };

  return (
    <div>
      <input type="file" accept=".pptx" onChange={handleUpload} />
      {slides.map((slide, index) => (
        <div key={index} dangerouslySetInnerHTML={{ __html: slide.html }} />
      ))}
    </div>
  );
}
  1. ppt的可以换个思路:ppt转pdf,然后再预览,这样前端可以实现

总结:

pdf:支持

word:仅支持docx

excel: 支持,但是样式有问题

ppt:支持

相关推荐
前端小趴菜051 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.3 小时前
serviceWorker缓存资源
前端
RadiumAg4 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子6 小时前
React状态管理最佳实践
前端
烛阴6 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子6 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...6 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts