快速开始
- 安装依赖
npm i pdfjs-dist@4.5.136
- 将 pdf.worker.mjs 文件放入服务端静态文件中,这是为了方便在下面设置 workerSrc 准确找到资源。因为该包是通过 npm 管理的包,引用路径的时候会很不方便。而将找个 js 文件方法 public 中在开发阶段会找不到路径。因此放入服务端。该文件在 node_modules/pdfjs-dist/build/pdf.worker.mjs
- 页面中使用
<template>
<div style="height: 100%;">
<canvas id="the-canvas"></canvas>
<button @click="nextPage">下一页</button>
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import 'pdfjs-dist'
onMounted(() => {
pdfShow()
})
const pageNum = ref(1)
const pdfContent = ref(null)
const pdfShow =async (url= 'http://192.168.1.30:30001/static/pdf/aaa.pdf') => {
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'http://192.168.1.30:30001/static/pdf/pdf.worker.mjs'
console.log(window.pdfjsLib.GlobalWorkerOptions.workerSrc);
const pdf = await window.pdfjsLib.getDocument(url)
pdfContent.value = pdf
pdf.promise.then(async (res) => {2.
const page =await res._transport.getPage(pageNum.value)
pageRender(page)
})
}
const pageRender = (page) => {
const scale = 1.5
const viewport = page.getViewport({scale})
const outputScale = window.devicePixelRatio || 1;
const canvas = document.getElementById('the-canvas');
const context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
const transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
const renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport
};
page.render(renderContext);
}
const nextPage = () => {
pageNum.value += 1
console.log(pdfContent.value);
pdfContent.value.promise.then(async (res) => {
const page =await res._transport.getPage(pageNum.value)
pageRender(page)
})
}
</script>
<style lang="scss" scoped>
</style>