将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>
  )
 }
相关推荐
蓝天白云下遛狗12 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come1123435 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui