前端预览pdf

前言

核心使用 pdf.js，目前网上其他开源组件 react-read-pdf、@mikecousins/react-pdf 也是同样的原理。

1. 安装 

npm install pdfjs-dist --save

2. 基本使用

此demo只列出核心使用方法，具体在Vue或React中的应用，可自行调整

本次版本号为 2.13.216，如果以下api失效可回退到此版本

2.1 引入包

import * as pdfjsLib from 'pdfjs-dist';

// 解决可能出现的 xxxchunk.worker.js 404 报错问题
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

2.2 根据url，获取pdf实例和文件名

// 以本地pdf文件为例，外链pdf需要解决跨域问题。官方说也可以用base64，还没有试过
const url = 'xxx.pdf';

const title = pdfjsLib.getFilenameFromUrl(url); // 文件名

pdfjsLib.getDocument(url).promise.then(pdf => {
    // 这里可以使用pdf
});

2.3 根据页码，获取当前页面

pdf.getPage(pageNum).then(page => {
    // 这里可以使用page对象
});

2.4 定义canvas 

<canvas id="pdf-canvas" style="width: 100%;"></canvas>

2.5 完成渲染 

const scale = 1;
const viewport = page.getViewport({ scale });
const outputScale = window.devicePixelRatio || 1;

// 设置canvas
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);

const transform = outputScale !== 1
    ? [outputScale, 0, 0, outputScale, 0, 0]
    : null;

// 渲染
const renderContext = {
    canvasContext: context,
    transform,
    viewport,
};
page.render(renderContext);

3. 完整代码(React为例)

只实现了基本翻页，缩放功能可通过修改canvas的宽度自行扩展

import React, {
    useState, useRef, useEffect,
} from 'react';

import * as pdfjsLib from 'pdfjs-dist';

pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;

export default () => {
    const canvasRef = useRef(null);

    const [pdf, setPdf] = useState(null);

    const [title, setTitle] = useState('');

    const [pageNum, setPageNum] = useState(1);

    const [total, setTotal] = useState(1);

    useEffect(() => {
        const url = 'xxx.pdf';
        
        // 获取title
        const pdfTitle = pdfjsLib.getFilenameFromUrl(url);
        setTitle(pdfTitle);

        // 获取pdf实例
        pdfjsLib.getDocument(url).promise.then(pdfObj => {
            setTotal(pdfObj.numPages);
            setPdf(pdfObj);
        });
    }, []);

    useEffect(() => {
        if (pdf !== null) {
            pageRender();
        }
    }, [pdf, pageNum]);

    const pageRender = () => {
        // 根据页码，获取当前页视图
        pdf.getPage(pageNum).then(page => {
            const scale = 1;
            const viewport = page.getViewport({ scale });
            const outputScale = window.devicePixelRatio || 1;

            // 设置canvas
            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');
            canvas.width = Math.floor(viewport.width * outputScale);
            canvas.height = Math.floor(viewport.height * outputScale);

            const transform = outputScale !== 1
                ? [outputScale, 0, 0, outputScale, 0, 0]
                : null;

            // 渲染
            const renderContext = {
                canvasContext: context,
                transform,
                viewport,
            };
            page.render(renderContext);
        });
    };

    const toPrev = () => {
        setPageNum(pageNum - 1);
    };

    const toNext = () => {
        setPageNum(pageNum + 1);
    };

    return (
        <>
            <h2>{title}</h2>
            <canvas ref={canvasRef} style={{width: '100%'}} />
            <button onClick={toPrev} disabled={pageNum <= 1}>上一页</button>
            <span>{pageNum} / {total}</span>
            <button onClick={toNext} disabled={pageNum >= total}>下一页</button>
        </>
    );
};

4. 添加css后的效果图