[英]How to convert PDF to Image in ReactJS
我正在使用 ReactJS 開發課程平台。 當用戶完成課程后,他可以下載 PDF 文件。
我需要與圖像(png或jpg)相同的文件的版本,但我還沒有找到任何方法來做到這一點。 有人能幫我嗎?
要生成 PDF 證書,我使用的是 lib: React-PDF 。
這是我生成 pdf 文件的代碼:
<PDFDownloadLink
document={
<Certificate course={course} name={name} date={today()} />
}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) => {
return loading ? 'Loading document...' : 'Download now!';
}}
</PDFDownloadLink>
請使用這個庫
https://www.npmjs.com/package/react-pdf-to-image
這很簡單。 它將返回圖像列表(pdf 中的每一頁作為一個圖像)
import React from 'react';
import {PDFtoIMG} from 'react-pdf-to-image';
import file from './pdf-sample.pdf';
const App = () =>
<div>
<PDFtoIMG file={file}>
{({pages}) => {
if (!pages.length) return 'Loading...';
return pages.map((page, index)=>
<img key={index} src={page}/>
);
}}
</PDFtoIMG>
</div>
export default App;
如果您只想下載每個 pdf 頁面作為圖像而不是組件,請遵循以下代碼
import PDFJS from 'pdfjs-dist/webpack';
這是 react-pdf-to-image 的依賴庫。 然后讀取 pdf 文件(我將 base64 作為輸入)
PDFJS.getDocument(blob).promise.then(pdf => {
const pages = [];
this.pdf = pdf;
for (let i = 0; i < this.pdf.numPages; i++) {
this.getPage(i + 1).then(result => {
// the result is the base 64 version of image
});
}
})
閱讀完每一頁后,從 getPage 方法中讀取每一頁作為圖像,如下所示
getPage = (num) => {
return new Promise((resolve, reject) => {
this.pdf.getPage(num).then(page => {
const scale = "1.5";
const viewport = page.getViewport({
scale: scale
});
const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');
canvas.height = viewport.height || viewport.viewBox[3]; /* viewport.height is NaN */
canvas.width = viewport.width || viewport.viewBox[2]; /* viewport.width is also NaN */
page.render({
canvasContext, viewport
}).promise.then((res) => {
resolve(canvas.toDataURL());
})
})
})
}
I created a helper function: convertPdfToImages which takes in the pdf file and returns an array of images encoded in base64, using the pdfjs package.
npm install pdfjs-dist -S
const PDFJS = require("pdfjs-dist/webpack"); const readFileData = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (e) => { resolve(e.target.result); }; reader.onerror = (err) => { reject(err); }; reader.readAsDataURL(file); }); }; //param: file -> the input file (eg event.target.files[0]) //return: images -> an array of images encoded in base64 const convertPdfToImages = async (file) => { const images = []; const data = await readFileData(file); const pdf = await PDFJS.getDocument(data).promise; const canvas = document.createElement("canvas"); for (let i = 0; i < pdf.numPages; i++) { const page = await pdf.getPage(i + 1); const viewport = page.getViewport({ scale: 1 }); const context = canvas.getContext("2d"); canvas.height = viewport.height; canvas.width = viewport.width; await page.render({ canvasContext: context, viewport: viewport }).promise; images.append(canvas.toDataURL()); } canvas.remove(); return images; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.