前端实现预览PDF
下载包 npm install react-pdf
我使用的是react-pdf@5.7.2版本
以下例子使用的是react创建的项目
直接上代码=>cv可用，保证高效
1.新增依赖
yarn add react-pdf@5.7.2
npm install react-pdf@5.7.22.导出js
/*
1.进入该组件时，通过路由传递path进来，形如：
history.push({ pathname: '/pdfPreview', query: { path } })
2.进入该组件时，通过props传递path进来，形如：
{ filePath :{ path :''} }
*/
import React, { useState } from 'react';
import { Spin, Tooltip, Input } from 'antd';
import {
LeftOutlined,
RightOutlined,
PlusCircleOutlined,
MinusCircleOutlined,
FullscreenOutlined,
FullscreenExitOutlined,
} from '@ant-design/icons';
import styles from './index.less';
import { Document, Page, pdfjs } from 'react-pdf';
// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const pdfjsWorker = require('pdfjs-dist/build/pdf.worker.entry'); // 引用本地的
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const PreviewPDF = (props: any) => {
const { location, filePDF, filePath } = props; // 方法1： 作为组件传入的值， 取出path（pdf地址）
// const { path }: any = location.query; // 方法2： 作为路由跳转的传入的值， 取出path（pdf地址）
const path = filePath;
const [pageNumber, setPageNumber] = useState(1);
const [pageNumberInput, setPageNumberInput] = useState(1);
const [pageNumberFocus, setPageNumberFocus] = useState(false);
const [numPages, setNumPages] = useState(1);
const [pageWidth, setPageWidth] = useState(1200);
const [fullscreen, setFullscreen] = useState(false);
const onDocumentLoadSuccess = ({ numPages }: any) => {
setNumPages(numPages);
};
const lastPage = () => {
if (pageNumber == 1) return;
const page = pageNumber - 1;
setPageNumber(page);
setPageNumberInput(page);
};
const nextPage = () => {
if (pageNumber === numPages) return;
const page = pageNumber + 1;
setPageNumber(page);
setPageNumberInput(page);
};
const onPageNumberFocus = () => {
setPageNumberFocus(true);
};
const onPageNumberBlur = () => {
setPageNumberFocus(false);
setPageNumberInput(pageNumber);
};
const onPageNumberChange = (e: any) => {
let { value } = e.target;
value = value <= 0 ? 1 : value;
value = value >= numPages ? numPages : value;
setPageNumberInput(value);
};
const toPage = (e: any) => {
setPageNumber(Number(e.target.value));
};
const pageZoomOut = () => {
if (pageWidth <= 1200) return;
const width = pageWidth * 0.8;
setPageWidth(width);
};
const pageZoomIn = () => {
const width = pageWidth * 1.2;
setPageWidth(width);
};
const pageFullscreen = () => {
if (fullscreen) {
setFullscreen(false);
setPageWidth(1200);
} else {
setFullscreen(true);
setPageWidth(window.screen.width - 40);
}
};
return (
<div className={`${styles.view}`}>
<div className={styles.pageContainer}>
<Document
file={path}
onLoadSuccess={onDocumentLoadSuccess}
loading={<Spin size="large" />}
options={{
// cMapUrl: `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`, // 解决打印不显示的问题，必要的
cMapUrl:'./cmaps/', // public路径 下载到本地
cMapPacked: true,
optimizedImages: true,
// disableWorker: true
}}
>
<Page pageNumber={pageNumber} width={pageWidth} loading={<Spin size="large" />} />
</Document>
</div>
<div className={styles.pageTool}>
<Tooltip title={pageNumber == 1 ? '已是第一页' : '上一页'}>
<LeftOutlined className={styles.outlined} onClick={lastPage} />
</Tooltip>
<Input
value={pageNumberFocus ? pageNumberInput : pageNumber}
onFocus={onPageNumberFocus}
onBlur={onPageNumberBlur}
onChange={onPageNumberChange}
onPressEnter={toPage}
type="number"
/>
/ {numPages}
<Tooltip title={pageNumber == numPages ? '已是最后一页' : '下一页'}>
<RightOutlined className={styles.outlined} onClick={nextPage} />
</Tooltip>
<Tooltip title="放大">
<PlusCircleOutlined className={styles.outlined} onClick={pageZoomIn} />
</Tooltip>
<Tooltip title="缩小">
<MinusCircleOutlined className={styles.outlined} onClick={pageZoomOut} />
</Tooltip>
<Tooltip title={fullscreen ? '恢复默认' : '适合窗口'}>
{fullscreen ? (
<FullscreenExitOutlined className={styles.outlined} onClick={pageFullscreen} />
) : (
<FullscreenOutlined className={styles.outlined} onClick={pageFullscreen} />
)}
</Tooltip>
</div>
</div>
);
};
export default PreviewPDF;3.cv Css
.view {
display: flex;
justify-content: center;
height: 100%;
// height: 100vh;
padding: 20px 0;
// background: #444;
.pageContainer {
width: max-content;
max-width: 100%;
// overflow-y: scroll;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
}
.pageTool {
position: absolute;
bottom: 60px;
left: -20px;
padding: 8px 15px;
color: white;
background: rgb(66, 66, 66);
// background-color: #fff;
border-radius: 15px;
.outlined {
margin: 0 10px;
user-select: none;
}
input {
display: inline-block;
width: 50px;
height: 24px;
margin-right: 10px;
text-align: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type='number'] {
-moz-appearance: textfield;
}
}
}4.引用组件
import PreviewPDF from './PreviewPDF';
/**
*
* @param file 数据返回的值，就是预览的pdf的path值
* 此处写的一个方法调用，获取path值，进行操作
*/
const handlePreview = async(file: any) => {
await setFilePath(file.url);
setVisiblePDF(true); // 组件方式预览
// const prefix = `${window.location.protocol}//${window.location.host}`;
// window.open(`${prefix}/#/binjiang-publicpower/previewPDF?path=${file.url}`); // 路由的方式预览， 新窗口打开
};
<Modal width={1400} destroyOnClose footer={false} visible={visiblePDF} onCancel={() => setVisiblePDF(false)} title={''}>
<PreviewPDF filePath={filePath} />
</Modal>
其实可以后端返回的链接添加参数（因为有些后端返回的是下载的链接），用自带的浏览器打开
默认的响应头是attachment，这里要改成inline，变成下载的
<a href={`${file.fileUrl || fileUrl}?dispositionType=inline`} target="_target"></a>
