前端实现pdf文件预览

1. 使用 PDF.js 进行自定义预览

PDF.js 是一个用 JavaScript 实现的 PDF 阅读器，可以嵌入到网页中进行 PDF 文件的预览，并且可以自定义其功能。

步骤如下：

1. 引入 PDF.js 库

import pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer';

2. 创建 PDF 预览组件

import React, { useEffect, useRef } from 'react';
import pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer';

const PdfPreview = ({ url }) => {
    const pdfContainer = useRef(null);

    useEffect(() => {
        // 配置 PDF.js
        pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

        // 加载 PDF
        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then((pdf) => {
            // 获取第一页
            pdf.getPage(1).then((page) => {
                const viewport = page.getViewport({ scale: 1.5 });
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                page.render(renderContext).promise.then(() => {
                    pdfContainer.current.appendChild(canvas);
                });
            });
        });
    }, [url]);

    return <div ref={pdfContainer} style={{ width: '100%', height: '600px' }}></div>;
};

export default PdfPreview;

3. 使用

if (record.name.endsWith('.pdf')) {
    const baseUrl = new URL(API_BASE_URL_PRO).origin;
    const fileUrl = `${baseUrl.replace(/:\d+$/, ':3100')}/api/common/file/download?fileId=${record.fileId}&bucketName=dataset`;

    const previewModal = Modal.info({
        title: (
            <>
                文件预览
                <span
                    style={{ fontSize: '14px', textDecoration: 'underline', marginLeft: '15px' }}
                >
                    {record.name}
                </span>
            </>
        ),
        content: <PdfPreview url={fileUrl} />,
        footer: null,
        width: '75%',
        style: { top: 35 },
        closable: true,
        onCancel: () => previewModal.destroy(),
    });

    return;
}

2. 使用 iframe 嵌入并自定义参数

如果不想使用 PDF.js，也可以通过 iframe 嵌入 PDF 文件，并通过特定参数来禁用下载功能。

步骤如下：

当检测到文件为 PDF 时，使用 iframe 进行嵌入，并添加 #toolbar=0 参数来禁用工具栏（包括下载按钮）。

if (record.name.endsWith('.pdf')) {
    const pdfFileUrl= new URL(API_BASE_URL_PRO).origin;
    // window.open(pdfFileUrl, '_blank'); 或者使用打开新窗口方式
    const fileUrl = `${baseUrl.replace(/:\d+$/, ':3100')}/api/common/file/download?fileId=${record.fileId}&bucketName=dataset#toolbar=0`;

    const previewModal = Modal.info({
        title: (
            <>
                文件预览
                <span
                    style={{ fontSize: '14px', textDecoration: 'underline', marginLeft: '15px' }}
                >
                    {record.name}
                </span>
            </>
        ),
        content: (
            <iframe
                src={pdfFileUrl}
                style={{ width: '100%', height: '600px', border: 'none' }}
            ></iframe>
        ),
        footer: null,
        width: '75%',
        style: { top: 35 },
        closable: true,
        onCancel: () => previewModal.destroy(),
    });

    return;
}

选择适合你项目需求的方法进行实现即可。如果你希望有更高的定制性和更好的用户体验，推荐使用 PDF.js。如果你希望实现简单快捷，可以选择 iframe 方法。