Ahm*_*rib 5 reactjs mern react-pdf react-pdf-viewer
我正在尝试使用这个react-pdf-viewer来实现pdf查看器。
但是,它不断抛出此错误:
/node_modules/pdfjs-dist/build/pdf.js:意外字符“#”(1413:9)
1411 | 1411 1412 | 1412 类 PDFDocumentLoadingTask {
1413 | 1413 静态#docId = 0; | ^
这是我添加的代码:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Viewer } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/core/lib/styles/index.css";
const ModalExample = ({ fileUrl }) => {
const [shown, setShown] = useState(false);
const modalBody = () => (
<div
style={{
backgroundColor: "#fff",
flexDirection: "column",
overflow: "hidden",
/* Fixed position */
left: 0,
position: "fixed",
top: 0,
/* Take full size */
height: "100%",
width: "100%",
/* Displayed on top of other elements */
zIndex: 9999,
}}
>
<div
style={{
alignItems: "center",
backgroundColor: "#000",
color: "#fff",
display: "flex",
padding: ".5rem",
}}
>
<div style={{ marginRight: "auto" }}>sample-file-name.pdf</div>
<button
style={{
backgroundColor: "#357edd",
border: "none",
borderRadius: "4px",
color: "#ffffff",
cursor: "pointer",
padding: "8px",
}}
onClick={() => setShown(false)}
>
Close
</button>
</div>
<div
style={{
flexGrow: 1,
overflow: "auto",
}}
>
<Viewer
fileUrl={
"https://lodeep-storage-3.s3.amazonaws.com/ressources/60e5892d1e8b3c2c24c5463c1663835449323.pdf"
}
/>
</div>
</div>
);
return (
<>
<button
style={{
backgroundColor: "#00449e",
border: "none",
borderRadius: ".25rem",
color: "#fff",
cursor: "pointer",
padding: ".5rem",
}}
onClick={() => setShown(true)}
>
Open modal
</button>
{shown && ReactDOM.createPortal(modalBody(), document.body)}
</>
);
};
export default ModalExample;
Run Code Online (Sandbox Code Playgroud)
这些是相关的依赖项:
“@react-pdf-viewer/core”:“3.7.0”,“反应”:“16.8.6”,
知道发生了什么事吗?
| 归档时间: |
|
| 查看次数: |
697 次 |
| 最近记录: |