1. 首先要安装依赖包
yarn add pdfjs-dist@2.12.313 //注意这个包的版本必须是这个
yarn add @pzy915/pdf-preview
2. 因为使用该组件需要配置workerSrc
和cMapUrl
, 所以,并未将pdfjs-dist@2.12.313
本身打包进该组件,因此需要在自己向项目中安装pdfjs-dist@2.12.313
, 并按如下方式配置到你的公共静态资源目录
我自己的项目是如下路径
public\pdfjs-dist-workspace
3. 拷贝node_modules/pdfjs-dist/build
, node_modules/pdfjs-dist/build/cmaps 两个文件夹到自己刚刚创建的那个目录下面
import { loadPdfAndRender } from './PdfUtil'
// 渲染函数 flowData就是后端返回的数据流 注意这里需要设置数据流返回的 responseType: 'arraybuffer',才能生效,否则预览的时候就会出现空白页面
const pdfViewer = ()=>{
const pdfPreviewRef = document.getElementById('pdfPreviewRef')
const [scale, setscale] = useState(0.8)
const renderPdf = () => {
if (!pdfPreviewRef) return
let blob = new Blob([flowData], {
type: 'application/pdf;charset=utf-8'
})
blob.arrayBuffer().then((e) => {
loadPdfAndRender({
data: new Uint8Array(e),
scale,
pdfRenderContainerDom: pdfPreviewRef,
})
})
}
return (<div id='pdfPreviewRef' className={styles.pdfPreviewRef}></div>)
}
export default pdfViewer
上面代码中loadPdfAndRender所传参数是预览的配置,点击源码进去可以看到可以配置的参数和具体示意如下:
{
/**
* 初始化完成之后立刻渲染第一页. 默认:true
* 该属性用于连续渲染
*/
inintedRender?: boolean;
/**
* pdf地址
*/
pdfUrl?: string;
/**
* pdf的流数据
*/
data?: TypedArray;
/**
* 承载显示pdf内容的html元素
*/
pdfRenderContainerDom: HTMLElement;
/**
* 缩放比例. 1表示100%, 0.5表示50%, 1.5表示150%. 最低0.5, 最高不限制. 不填默认为: 1.5
*/
scale?: number;
/**
* 强制保持pdf每页宽度为width指定的宽度(原本页宽大于width的会收缩,否则会拉伸), 设置了width之后, scale设置将无效
*/
width?: number;
/**
* 是否携带凭证(cookie信息). 不填表示false
*/
withCredentials?: boolean;
/**
* 自定义请求头. 可选
*/
httpHeaders?: Record<string, unknown>;
/**
* 每页pdf渲染完毕之后的自定义回调函数。会在每页pdf渲染完成之后插入界面之前进行调用
*
* @param {PdfCanvasInfoType} pdfPageCanvasInfo 当前页pdf渲染完毕后的canvas信息
*
*/
pdfPageRenderCall?: (pdfPageCanvasInfo: PdfCanvasInfoType) => void;
}
4. PdfUtil文件是我拷贝源码的内容,内容如下:
import {
PdfjsDistConfigType,
pdfPreviewBuilder,
PdfPreviewConfig,
} from '@pzy915/pdf-preview'
const pdfjsDistRes = 'pdfjs-dist-workspace'
const workerSrc = `${pdfjsDistRes}/build/pdf.worker.js`
const cMapUrl = `${pdfjsDistRes}/cmaps/`
const pdfjsDistConfig: PdfjsDistConfigType = {
workerSrc,
cMapUrl,
}
const pdfPreview = pdfPreviewBuilder(pdfjsDistConfig)
/**
* 加载pdf文件,并完整渲染
*
* @param pdfUrl pdf地址
* @param scale 缩放比
* @param pdfRenderContainerDom 渲染pdf的容器dom节点
*/
export async function loadPdfAndRender(pdfConfig: PdfPreviewConfig) {
return pdfPreview.loadPdfAndRender(pdfConfig)
}
/**
* 获取pdf预览的操作信息
*
* @param pdfConfig pdf预览配置信息
*/
export function loadPdfDocOperateInfo(pdfConfig: PdfPreviewConfig) {
return pdfPreview.loadPdfDocOperateInfo(pdfConfig)
}
/**
*
* @return {HTMLCanvasElement}
*/
export function drawWatermark(waterMark) {
const canvas = document.createElement('canvas')
canvas.width = 200
canvas.height = 200
const ctx = canvas.getContext('2d')
if (!ctx) return
ctx.rotate((-18 * Math.PI) / 180)
ctx.font = '14px Vedana'
ctx.fillStyle = '#ffccc7'
ctx.textAlign = 'left'
ctx.textBaseline = 'middle'
ctx.fillText(waterMark, 0, 50)
return canvas
}
4. 最后就可以成功啦
如果有缩放需求,可以自己改变scale的值来进行缩放
整理不易,如能帮到您,留下您宝贵一赞~