安装
npm install pdfjs-dist --save
我的pdfjs-dist版本为:
"pdfjs-dist": "^2.13.216"
html
<div
class="pdf_class"
>
<canvas
ref="myCanvas"
class="pdf-container"
>
</canvas>
<div class="btn_page">
<button
@click="prePage"
class="one"
>Prev</button>
<span>{{curPage}}/{{pdfEnd}}</span>
<button
@click="nextPage"
class="two"
>Next</button>
</div>
</div>
将下面链接复制到index.html中
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>
JavaScript
<script setup>
// 导入pdf
const pdfJS = window["pdfjs-dist/build/pdf"];
import { ref } import 'vue';
const pdfEnd = ref(0); // 尾页码
const myCanvas = ref(null); // 拿到pdf dom
let pdfObj = null; // 用于保存pdf实例
const curPage = ref(1); // 当前页
const getPage = (pdf, pageNumber) => { // 参数为pdf实例, 当前页码
if (pageNumber <= 0) {
console.log("页数超过");
curPage.value = 1;
} else if (pageNumber > pdf.numPages) {
curPage.value = pdf.numPages;
} else {
// 在不超出&低于总页数的情况下执行
pdf.getPage(pageNumber).then((page) => {
let canvas = toRaw(myCanvas.value);
let viewport = page.getViewport({ scale: 1 });
canvas.height = viewport.height;
canvas.width = viewport.width;
let ctx = canvas.getContext("2d");
let renderContext = {
canvasContext: ctx,
viewport: viewport,
};
// 显示pdf
page.render(renderContext).promise.then(() => {
console.log("显示");
});
});
}
};
// 初始化 pdf
const previewPDF = (url) => { // 参数为pdf链接
let loadingTask = pdfJS.getDocument(url);
loadingTask.promise.then((pdf) => {
pdfObj = pdf; // 保存pdf整体实例
pdfEnd.value = pdf.numPages;
getPage(pdf, curPage.value);
});
};
// 上一页
const prePage = () => {
curPage.value--;
getPage(pdfObj, curPage.value); // 重新执行
};
// 下一页
const nextPage = () => {
curPage.value++;
getPage(pdfObj, curPage.value); // 重新执行
};
previewPDF('pdf链接'); // 进入页面执行
</script>
坑点
按道理来说, 可以通过以下方式进行导入
import * as pdfJS from "pdfjs-dist";
import * as worker from "pdfjs-dist/build/pdf.worker";
pdfJS.GlobalWorkerOptions.workerSrc = worker;
而我用了却一直抛出错误, 让我很疑惑, 迫不得已只能选择使用cdn, 这也不是长久之计, 因为我认为使用cdn会让我的项目不够稳定, 求路过的大佬看看这个问题有完美的解决方案么, 跪求, 在此感谢!!!
