将PDF流使用 canvas 绘制然后转为图片展示在页面上(二)

将PDF流转为图片展示在页面上

使用 pdfjs-dist 库来渲染 PDF 页面到 canvas 上,然后将 canvas 转为图片

安装 pdfjs-dist 依赖

bash 复制代码
npm install pdfjs-dist
或者
yarn add pdfjs-dist

创建一个组件来处理 PDF 流的加载和渲染

该组件中是一个包含 PDF 文件的 ArrayBuffer 或者 Uint8Array。

将 pdf 流传入该组件中使用

javascript 复制代码
/** @format */

import React, { useState, useEffect } from 'react';
// import { pdfjs } from 'pdfjs-dist';
var pdfjs = require('pdfjs-dist/es5/build/pdf.js');
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

const PdfToImage = ({ pdfData }) => {
    const [imageSrc, setImageSrc] = useState(null);

    const base64ToArrayBuffer = (base64) => {
        var binary_string = window.atob(base64);
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        }
        return bytes.buffer;
    };

    useEffect(() => {
        const renderPDF = async (arrayBuffer) => {
            const loadingTask = pdfjs.getDocument({ data: arrayBuffer });

            try {
                const pdf = await loadingTask.promise;
                const page = await pdf.getPage(1); // 获取第一页
                const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例
                const canvas = document.createElement('canvas');
                const canvasContext = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext,
                    viewport,
                };
                await page.render(renderContext).promise;

                // 将canvas内容转换为图片
                const imageSrc = canvas.toDataURL('image/png');
                setImageSrc(imageSrc);
            } catch (error) {
                console.error('Error rendering PDF:', error);
            }
        };

		// 首先将base64的PDF流转为ArrayBuffer
        let arrayBuffer = base64ToArrayBuffer(pdfData);
		// 然后将ArrayBuffer格式的数据转为图片
        renderPDF(arrayBuffer);
    }, [pdfData]);

    return <div>{imageSrc && <img src={imageSrc} alt="PDF as image" />}</div>;
};

export default PdfToImage;

使用示例

这里的PDF_content 也可以直接使用 ArrayBuffer 或者 Uint8Array 的格式,直接传入组件,将组件中的 base64ToArrayBuffer 方法不使用即可。

javascript 复制代码
import React from 'react';
import PdfToImage from './PdfToImage.jsx';
 render() {
 const PDF_content = 'XXXX....BYFhEdCmVuZHN0cmVhbQplbmRvYmoKc3RhcnR4cmVmCjg2NTkxCiUlRU9GCg=='// base64 格式
  return (
  	<PdfToImage  pdfData={PDF_content}></PdfToImage>
  )
 }
相关推荐
Apifox3 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
inxunoffice5 分钟前
批量将文本文件转换为 Word/PDF/Excel/图片等其它格式
pdf·word·excel
一张假钞5 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行6 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758107 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周10 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队28 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript