pdf pc端、h5在线预览问题 pdfjs-dist

1.插件file-viewer--支持pdf,word,xsl..etc（支持pc，H5中不支持，本身利用的是iframe)

2.iframe

<iframe style={{width: '100%', height: '100%'}} title={filename} src={path} frameborder="0"></iframe>

3.ios本身支持pdf预览，安卓需要转换为canvas进行语言-- 插件pdf-dist

import React, { useState, useEffect, useRef } from 'react';
var pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');//安卓一定需要引入es5，不然报错
import 'pdfjs-dist/es5/build/pdf.worker.entry';
import './index.less'

const PdfViewer = ({ url }) => {
    const [loading, setLoading] = useState(true);
    const [rendering, setRendering] = useState(false);
    const pdfRef = useRef(null);
    function renderPdf(pdf) {
			let pdfDoc = pdf;
			let fragment = document.createDocumentFragment();
			for (let i = 1; i <= pdfDoc.numPages; i++) {
	　　　　// 因为不知道把pdf解析了多少页，所以我们需要循环创建canvas并且一定要不同的id
	　　　　let canvas = document.createElement('canvas')
	　　　　canvas.id = `pdf${i}` 
	　　　　let canvasContext = canvas.getContext('2d') 
	　　　　// 通过getPage的方法获取到每一页的内容渲染，结束后把当前创建的canvas添加到页面中
	　　　　pdfDoc.getPage(i).then((page) => { 
	　　　　　　//逐页解析PDF
						var viewport = page.getViewport({ scale: 5 }); // 页面缩放比例，值越大越清晰
						canvas.height = viewport.height;
						canvas.width = viewport.width;
						canvasContext.clearRect(0, 0, canvas.width, canvas.height);
						var renderContext = {
								canvasContext: canvasContext,
								viewport: viewport,
								rotate: 90,
						};
	　　　　　　page.render(renderContext) }) 
						fragment.appendChild(canvas)
			}
　　　　// 获取到页面定义好的父元素，把生成的canvas添加进去
　　　　document.getElementById('pdf').appendChild(fragment)
    }

    useEffect(() => {
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise
            .then((pdf) => {
                pdfRef.current = pdf;
                renderPdf(pdf);
            })
            .catch((error) => {
                setRendering(true);
								console.log(error)
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    return (
			<div className="pdf-style">
				<div id="pdf">
					
				</div>
			</div>
    );
};

export default PdfViewer;

注意点：

        1.pdfjs-dist需要引入es5

        2.若有跨域问题需要运维处理跨域

        3.当前写法为一次行全部渲染，若想分批次渲染可以参考第二个文档

参考文档：在react中使用react-pdf-js 和 pdfjs-dist的区别和如何使用。以及分页和不分页是怎么处理的 - C丶c - 博客园

移动端在线预览PDF插件，PDFJS API - 掘金

标签：canvas,dist,h5,pc,pdf,pdfjs,height,viewport
来源： https://blog.csdn.net/qq_40504777/article/details/121543743