如何解决如何使用PDF.js和CRA呈现文档?
有谁知道我如何使用React和 pdfjs-dist lib呈现 Uint8Array 格式的PDF文件?
我的组件如下所示:
import React,{ useEffect,useState,createRef } from "react";
import * as pdfjs from "pdfjs-dist";
import { DocViewerProps } from "../../interfaces";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const DocViewer: React.FC<DocViewerProps> = ({ docData }) => {
const [width,setWidth] = useState(0);
const [height,setHeight] = useState(0);
let fragmentRef = createRef<HTMLCanvasElement>();
useEffect(() => {
const viewDocument = async (docData) => {
let loadingTask = pdfjs.getDocument({ data: docData });
const pdfDocument = await loadingTask.promise;
await pdfDocument.dataLoaded;
const pdfPage = await pdfDocument.getPage(1);
/*const docText = await pdfPage.getTextContent();
console.dir(docText);
const pageTextContent = docText.items;
console.dir(pageTextContent);
setText(pageTextContent);*/
let viewport = pdfPage.getViewport({ scale: 1.0 });
if (viewport && viewport.width && viewport.height) {
console.dir(viewport);
const { height,width } = viewport;
setWidth(width);
setHeight(height);
}
if (fragmentRef.current) {
let canvasContext = fragmentRef.current.getContext("2d");
if (canvasContext) {
console.log("context has been set");
await pdfPage.render({ canvasContext,viewport }).promise;
}
}
};
if (docData && fragmentRef) {
console.dir(docData);
viewDocument(docData);
}
},[docData,fragmentRef]);
return <canvas width={width} height={height} ref={fragmentRef} />;
};
export default DocViewer;
此时控制台上没有错误,我得到的只是一块空画布。
非常感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。