antd 使用pdfjs预览

Ant Design 是一个 UI 框架，而 PDF.js 是 Mozilla 开发的一款开源的 JavaScript PDF 阅读器。您可以使用 Ant Design 的 Upload 组件上传 PDF 文件，在上传完成后，通过 PDF.js 渲染出 PDF 文件的预览效果。具体实现方式可以参考以下步骤：

1. 在上传组件中，通过 `beforeUpload` 属性来获取上传文件的 Blob 数据，并将其传入 PDF.js 进行渲染。

import React, { useState } from 'react';
import { Upload } from 'antd';
import pdfjs from 'pdfjs-dist/webpack';

const { Dragger } = Upload;

const PdfPreview = () => {
  const [pdfUrl, setPdfUrl] = useState(null);

  const handleBeforeUpload = (file) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = async (event) => {
      const pdfData = new Uint8Array(event.target.result);
      const loadingTask = pdfjs.getDocument({ data: pdfData });
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
      const scale = 1.5;
      const viewport = page.getViewport({ scale });
      const canvas = document.createElement('canvas');
      const canvasContext = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext,
        viewport,
      };
      const renderTask = page.render(renderContext);
      await renderTask.promise;
      setPdfUrl(canvas.toDataURL());
    };
    return false;
  };

  return (
    <Dragger beforeUpload={handleBeforeUpload}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击或拖拽文件到此处上传</p>
    </Dragger>
    {pdfUrl && <img src={pdfUrl} alt="PDF preview" />}
  );
};

export default PdfPreview;

在上述代码中，我们使用了 `pdfjs-dist/webpack` 模块来加载 PDF.js 库，然后在 `beforeUpload` 属性中获取上传文件的 Blob 数据，通过 PDF.js 进行渲染，并将渲染后的图片数据作为 URL 存储在组件的状态中，最后将图片渲染在页面上。

2. 在渲染 PDF 预览时，可以使用 Ant Design 的 Image 组件来显示图片。

import React, { useState } from 'react';
import { Upload, Image } from 'antd';
import pdfjs from 'pdfjs-dist/webpack';

const { Dragger } = Upload;

const PdfPreview = () => {
  const [pdfUrl, setPdfUrl] = useState(null);

  const handleBeforeUpload = (file) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = async (event) => {
      const pdfData = new Uint8Array(event.target.result);
      const loadingTask = pdfjs.getDocument({ data: pdfData });
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
      const scale = 1.5;
      const viewport = page.getViewport({ scale });
      const canvas = document.createElement('canvas');
      const canvasContext = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext,
        viewport,
      };
      const renderTask = page.render(renderContext);
      await renderTask.promise;
      setPdfUrl(canvas.toDataURL());
    };
    return false;
  };

  return (
    <Dragger beforeUpload={handleBeforeUpload}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击或拖拽文件到此处上传</p>
    </Dragger>
    {pdfUrl && <Image src={pdfUrl} />}
  );
};

export default PdfPreview;

在上述代码中，我们使用了 Ant Design 的 Image 组件来显示 PDF 预览图片。