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

2021-12-01 14:30:15 阅读：425 来源： 互联网

标签：canvas dist h5 pc pdf pdfjs height viewport

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

2.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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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