在Vue和React中使用pdf.js预览PDF文件，可以遵循以下步骤：
- 安装pdf.js库。
- 在Vue或React组件中引入pdf.js。
- 创建一个canvas或div来渲染PDF文件。
- 使用fetch或其他方式获取PDF文件。
- 使用pdf.js的API渲染PDF文件。
以下是在Vue和React中实现的示例代码：
Vue 示例
<template>
<div>
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import { getDocument } from 'pdfjs-dist/webpack';
export default {
name: 'PdfViewer',
props: {
pdfUrl: {
type: String,
required: true
}
},
mounted() {
this.loadPdf();
},
methods: {
async loadPdf() {
const loadingTask = getDocument(this.pdfUrl);
const pdf = await loadingTask.promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = this.$refs.pdfCanvas;
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext).promise;
}
}
};
</script>React 示例
import React, { useRef, useEffect } from 'react';
import { getDocument } from 'pdfjs-dist/webpack';
const PdfViewer = ({ pdfUrl }) => {
const pdfCanvas = useRef(null);
useEffect(() => {
(async () => {
const loadingTask = getDocument(pdfUrl);
const pdf = await loadingTask.promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = pdfCanvas.current;
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext).promise;
})();
}, [pdfUrl]);
return <canvas ref={pdfCanvas} />;
};
export default PdfViewer;在这两个示例中，我们都使用了pdfjs-dist库中的getDocument函数来获取PDF文档，然后使用getPage获取第一页，并使用render方法渲染页面到canvas元素中。这里的scale参数可以根据需要调整，以适应不同屏幕大小的显示。
请确保在实际部署时，对pdf.js进行适当的配置和优化，以满足生产环境的性能要求。