vue项目中使用pdfjs-dist预览pdf文件+分页并兼容字体
1.安装
npm install pdfjs-dist --save
2.引入
let PDFJS = require(“pdfjs-dist”);
PDFJS.GlobalWorkerOptions.workerSrc = require(“pdfjs-dist/build/pdf.worker.min”);
<div class="center">
<div class="contor">
<van-button
plain
hairline
color="#c9431f"
type="primary"
size="mini"
style="cursor:pointer"
@click="prev"
>上一页</van-button>
<span>
<span v-text="page_num" /> /
<span v-text="page_count" />
</span>
<van-button
plain
hairline
color="#c9431f"
type="primary"
size="mini"
style="cursor:pointer"
@click="next"
>下一页</van-button>
<van-button
plain
hairline
color="#c9431f"
type="primary"
size="mini"
style="cursor:pointer"
@click="addscale"
>放大</van-button>
<van-button
plain
hairline
color="#c9431f"
type="primary"
size="mini"
style="cursor:pointer"
@click="minus"
>缩小</van-button>
</div>
<canvas id="the-canvas" class="canvasstyle" />
</div>
data() {
return {
pdfUrl: "",
pdfDoc: null, // pdfjs 生成的对象
pageNum: 1, //
pageRendering: false,
pageNumPending: null,
scale: 1.7, // 放大倍数
page_num: 0, // 当前页数
page_count: 0, // 总页数
maxscale: 2.2, // 最大放大倍数
minscale: 1.2 // 最小放大倍数
};
},
computed: {
ctx() {
const id = document.getElementById("the-canvas");
return id.getContext("2d");
}
},
methods: {
onClickLeft() {
window.history.go(-1);
},
init(pdfUrl) {
let _this = this;
// 初始化pdf
PDFJS.getDocument(pdfUrl).then(function(pdfDoc_) {
_this.pdfDoc = pdfDoc_;
_this.page_count = _this.pdfDoc.numPages;
_this.renderPage(_this.pageNum);
});
},
renderPage(num) {
// 渲染pdf
const vm = this;
this.pageRendering = true;
const canvas = document.getElementById("the-canvas");
// Using promise to fetch the page
this.pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(vm.scale);
// alert(vm.canvas.height)
canvas.height = viewport.height;
vm.pdfWidth = canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: vm.ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
vm.pageRendering = false;
if (vm.pageNumPending !== null) {
// New page rendering is pending
vm.renderPage(vm.pageNumPending);
vm.pageNumPending = null;
}
});
});
vm.page_num = vm.pageNum;
},
addscale() {
// 放大
if (this.scale >= this.maxscale) {
return;
}
this.scale += 0.5;
this.queueRenderPage(this.pageNum);
},
minus() {
// 缩小
if (this.scale <= this.minscale) {
return;
}
this.scale -= 0.5;
this.queueRenderPage(this.pageNum);
},
prev() {
// 上一页
const vm = this;
if (vm.pageNum <= 1) {
return;
}
vm.pageNum--;
vm.queueRenderPage(vm.pageNum);
},
next() {
// 下一页
const vm = this;
if (vm.pageNum >= vm.page_count) {
return;
}
vm.pageNum++;
vm.queueRenderPage(vm.pageNum);
},
queueRenderPage(num) {
if (this.pageRendering) {
this.pageNumPending = num;
} else {
this.renderPage(num);
}
}
},
mounted() {
//解决字体问题
const CMAP_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/";
let obj = {};
obj.url = this.$route.query.agreementPdfUrl; //pdf文件地址,根据情景自行修改
obj.cMapUrl = CMAP_URL;
obj.cMapPacked = true;
this.init(obj);
}
5.完成。拿来即用,希望小伙伴们少走弯路!
路漫漫其修远兮,吾将上下而求索。加油!
————————————————
原文链接:https://blog.csdn.net/qq_38057434/article/details/104654073