如何使用 React 将 word 文件转换为图像？ [关闭]

Question

我正在尝试从上传的 word 文档到页面，它仅将第一页显示为图像。

我一直在尝试添加很多库，但其中大部分都已过时，但我没有真正的方法来解决这个问题。有人现在我怎么能做到这一点？我正在使用最新版本的 React。

Answer 1

要使用 React 将 Word 文档转换为图像，您可以按照以下步骤操作：

1. 安装所需的依赖项：

• 安装

  docx

  包来阅读Word文档。
• 安装

  html-to-image

  包以将 HTML 内容转换为图像。

运行以下命令来安装这些包：

npm install docx html-to-image

2. 创建一个 React 组件来处理文件上传：

import React, { useRef } from 'react';
import { WordToImage } from './WordToImage';

export const FileUpload = () => {
  const inputRef = useRef();

  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    if (file) {
      const wordToImage = new WordToImage();
      const image = await wordToImage.convert(file);
      if (image) {
        const img = document.createElement('img');
        img.src = image;
        document.body.appendChild(img);
      }
    }
  };

  return (
    <div>
      <input
        type="file"
        ref={inputRef}
        onChange={handleFileUpload}
        accept=".docx"
      />
    </div>
  );
};

3. 创建一个

   WordToImage

   类来处理转换：

import { Document } from 'docx';
import { Packer } from 'docx';
import { browser } from 'html-to-image';

export class WordToImage {
  async convert(file) {
    const arrayBuffer = await file.arrayBuffer();
    const document = await Document.create(arrayBuffer);
    const html = await Packer.toHtml(document);

    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    tempDiv.style.width = '612px'; // A4 width in points
    tempDiv.style.height = '792px'; // A4 height in points
    tempDiv.style.overflow = 'hidden';

    document.body.appendChild(tempDiv);
    const image = await browser.toPng(tempDiv);
    document.body.removeChild(tempDiv);
    return image;
  }
}

最后，在您的主要 React 组件中使用

FileUpload

组件：

import React from 'react';
import { FileUpload } from './FileUpload';

function App() {
  return (
    <div className="App">
      <FileUpload />
    </div>
  );
}

export default App;

此代码创建一个文件输入，允许用户上传 Word 文档。当用户上传文档时，文档的第一页将被转换为图像并显示在页面上。请注意，此解决方案可能不适用于具有高级格式和样式的复杂 Word 文档。在这种情况下，您可能需要使用更复杂的方法或后端服务来更准确地处理转换。