方法一:将pdf文件渲染成Canvas
1、安装pdfjs-dist
"pdfjs-dist": "^3.5.141"
2、代码
<template>
<div id="pdf-container">
<canvas v-for="page in state.pdfPages" :key="page" :id="`pdfCanvas${page}`" style="border-bottom:1px solid #d4d2d2" />
</div>
</template>
<script setup>
import { reactive, nextTick, onMounted } from 'vue'
import * as PDF from 'pdfjs-dist'
const pdfjsWorker = import('pdfjs-dist/build/pdf.worker.entry')
PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker
// 在public目录下的2.pdf
import pdf from '/2.pdf'
const state = reactive({
pdfPath: pdf, // 本地PDF文件路径放在/public中
pdfPages: '', // 页数
pdfWidth: '', // 宽度
pdfSrc: '', // 地址
pdfScale: 1.0, // 放大倍数
})
let pdfDoc = null
onMounted(() => {
loadFile(state.pdfPath)
})
function loadFile (url) {
PDF.getDocument(url).promise.then((p) => {
pdfDoc = p
const { numPages } = p
state.pdfPages = numPages
nextTick(() => {
renderPage(1) // 从第一页开始渲染
})
})
}
function renderPage (num) {
pdfDoc.getPage(num).then((page) => {
const canvas = document.getElementById(`pdfCanvas${num}`)
const ctx = canvas.getContext('2d')
const dpr = window.devicePixelRatio || 1
const bsr
= ctx.webkitBackingStorePixelRatio
|| ctx.mozBackingStorePixelRatio
|| ctx.msBackingStorePixelRatio
|| ctx.oBackingStorePixelRatio
|| ctx.backingStorePixelRatio
|| 1
const ratio = dpr / bsr
const viewport = page.getViewport({ scale: state.pdfScale })
canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
canvas.style.width = '100%'
canvas.style.height = '100%'
state.pdfWidth = `${viewport.width}px`
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
// 将 PDF 页面渲染到 canvas 上下文中
const renderContext = {
canvasContext: ctx,
viewport,
}
page.render(renderContext)
if (state.pdfPages > num)
renderPage(num + 1)
})
}
</script>
<style>
#videoContainer {
height: 842px;
}
</style>
3、效果
方法二:使用viewer.html
1、下载 pdf.js
下载地址
2、将包放到public中
3、代码
<template>
<div class="container">
<iframe :src="pdfUrl" width="100%" height="100%"></iframe>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
fileUrl: {
type: String,
default: '/2.pdf'
}
})
const pdfUrl = ref(''); // pdf文件地址
// pdfjs包的路径
const fileUrl = '/pdfjs/web/viewer.html?file='; // pdfjs文件地址
onMounted(() => {
pdfUrl.value = fileUrl + encodeURIComponent(props.fileUrl);
});
</script>
<style scoped lang="scss">
.container {
width: 100%;
height: 100%;
}
</style>
4、效果
说明:方法一的展示效果比方法二的展示效果模糊
参考
【PDF.js】2023 最新 PDF.js 在 Vue3 中的使用
vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
超详细的vue3使用pdfjs教程