Ant Design Pro
中可以使用 `react-
pdf` 这个第三方库来实现
PDF 文件的
预览和打印。具体实现步骤如下：
1. 安装 `react-
pdf` 库
```
npm install react-
pdf
```
2. 在组件
中引入 `
Document`、`Page` 和 `
pdfjs` 组件
```javascript
import {
Document, Page,
pdfjs } from 'react-
pdf';
pdfjs.GlobalWork
erOptions.work
erSrc = `//cdnjs.cloudflare.com/ajax/libs/
pdf.js/${
pdfjs.v
ersion}/
pdf.work
er.js`;
```
3. 在页面
中使用 `
Document` 和 `Page` 组件来渲染
PDF 文件
```javascript
<
Document file="/example.
pdf">
<Page pageNumb
er={1} />
</
Document>
```
其
中 `file` 属性指定要渲染的
PDF 文件路径，`Page` 组件的 `pageNumb
er` 属性指定要渲染的页码。
4. 添加打印功能
```javascript
import {
pdfjs,
Document, Page,
pdf } from 'react-
pdf';
import { Button } from 'antd';
pdfjs.GlobalWork
erOptions.work
erSrc = `//cdnjs.cloudflare.com/ajax/libs/
pdf.js/${
pdfjs.v
ersion}/
pdf.work
er.js`;
class
PDFViewer extends React.Component {
state = {
numPages: null,
pageNumb
er: 1,
};
on
DocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
};
goToPrevPage = () => {
this.setState(prevState => ({ pageNumb
er: prevState.pageNumb
er - 1 }));
};
goToNextPage = () => {
this.setState(prevState => ({ pageNumb
er: prevState.pageNumb
er + 1 }));
};
print
Document = () => {
pdfjs.GlobalWork
erOptions.work
erSrc = `//cdnjs.cloudflare.com/ajax/libs/
pdf.js/${
pdfjs.v
ersion}/
pdf.work
er.js`;
const loadingTask =
pdfjs.get
Document(this.props.file);
loadingTask.promise.then(
pdf => {
const printOptions = {
...
pdfjs.DefaultPrintParams,
printResolution: 150,
embedJavascript: true,
};
const
pdfWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=no');
pdfWindow.
document.write('<html><head><title>Print</title></head><body>');
pdfWindow.
document.write('<embed type="application/
pdf" ');
pdfWindow.
document.write(`src="${this.props.file}" `);
pdfWindow.
document.write(`id="
pdfDocument" `);
pdfWindow.
document.write(`print="print" `);
pdfWindow.
document.write(`options='${JSON.stringify(printOptions)}' `);
pdfWindow.
document.write('></embed>');
pdfWindow.
document.write('</body></html>');
pdfWindow.
document.close();
setTimeout(() => {
pdfWindow.print();
}, 500);
});
};
rend
er() {
const { pageNumb
er, numPages } = this.state;
return (
<div>
<p>
Page {pageNumb
er} of {numPages}
</p>
<
Document file={this.props.file} onLoadSuccess={this.on
DocumentLoadSuccess}>
<Page pageNumb
er={pageNumb
er} />
</
Document>
<Button disabled={pageNumb
er <= 1} onClick={this.goToPrevPage}>
Previous
</Button>
<Button disabled={pageNumb
er >= numPages} onClick={this.goToNextPage}>
Next
</Button>
<Button onClick={this.print
Document}>Print</Button>
</div>
);
}
}
export default
PDFViewer;
```
在上面的代码
中，我们添加了一个 `print
Document` 方法，该方法会打开一个新的窗口，并在窗口
中显示
PDF 文件，然后调用 `window.print()` 方法将
PDF 文件打印出来。注意，该方法
中使用了
PDF.js 库的 `get
Document` 方法来获取
PDF 文件的信息。
这样就可以在 Ant Design Pro
中预览和打印
PDF 文件了。
3805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
