vue 中展示PDF内容
vue 中展示PDF内容
不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以后来需要验证后再进行展示pdf内容,只有对应知道的人自己验证后才能打开;
这里说下自己的实现吧,读取pdf,那么在纯静态的使用vue-cli
搭建的网站中读取pdf文件是不行的,何况涉及到验证,那么只有调用接口来处理,但是读取pdf文件展示就需要组件,找了pdf.js 来使用,根据官方文档,pdf文件不能够使用其他网站的,也就是不能跨域,不过幸好可以加载文件流进去,至此 验证=>获取文件流数据=>渲染 完成,下方给的是处理代码
loadFile(data) {
let _this = this;
let transData = window.atob(data);
PDFJS.getDocument({ data: transData }).then(pdf => {
_this.pdfDoc = pdf;
_this.pages = _this.pdfDoc.numPages;
_this.$nextTick(() => {
_this.renderPage(1);
});
});
}
renderPage(num) {
let _this = this;
this.pdfDoc.getPage(num).then(page => {
let canvas = document.getElementById("the-canvas" + num);
let ctx = canvas.getContext("2d");
let dpr = window.devicePixelRatio || 1;
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
let ratio = dpr / bsr;
let viewport = page.getViewport(
screen.availWidth / page.getViewport(1).width
);
canvas.width = viewport.width * ratio;
canvas.height = viewport.height * ratio;
canvas.style.width = viewport.width + "px";
canvas.style.height = viewport.height + "px";
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).promise.then(()=>{
//这一段处理涉及到展示处理
_this.transImg(
canvas,
canvas.style.width,
canvas.style.height,
num
);
});
if (_this.pages > num) {
_this.renderPage(num + 1);
}
});
}
//这一段处理涉及到展示处理
transImg(canvas, w, h, num) {
var image = new Image();
image.src = canvas.toDataURL("image/jpeg");
image.className = "trans-img";
image.setAttribute("preview", 1);
$("#pdf-img").append(image);
let _self = this;
if (this.pages <= num) {
setTimeout(() => {
_self.loadingConfig.isShow = false;
_self.$previewRefresh();
}, 500);
}
}
用到的 window.atob()
关于这一段处理涉及到展示的注释,因为用户要查看以canvas承载的pdf文字,但是查看体验并不是很好,文字很小,也不能放大,那么就需要处理这块问题,找了几个插件,试了vue-photo-preview 这个组件满足条件,不过由于它是使用的img,所以我上边处理给成了img并隐藏对应canvas展示,根据vue-photo-preview 所定的规范来处理,效果还是不错的,不过pdf.js这个组件比较大,我采用了cdn引用了js,以下是剩余部分:
<template>
<div class="pdf-body">
<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page" style="display:none;"></canvas>
<div id="pdf-img"></div>
<loading :show="loadingConfig.isShow" :text="loadingConfig.text"></loading>
</div>
</template>
至此,优化差不多了
补充一下,在canvas写入时有问题,那么需要改一下顺序了
page.render(renderContext).promise.then(()=>{
//这一段处理涉及到展示处理
_this.transImg(
canvas,
canvas.style.width,
canvas.style.height,
num
);
});
if (_this.pages > num) {
_this.renderPage(num + 1);
}
//上方这一段需要替换成下方这一段,添加一个data:canvasList
page.render(renderContext).promise.then(() => {
_this.canvasList.push({
index: num,
canvasData: canvas
});
if (_this.pages > num) {
_this.renderPage(num + 1);
} else {
_this.canvasList = _this.canvasList.sort((a, b) => {
return a.index - b.index;
})
_this.canvasList.forEach(item => {
_this.transImg(item.canvasData,canvasData.style.width, canvasData.style.height, item.index);
});
}
});