img pdf 展示_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);

}

}

关于这一段处理涉及到展示的注释,因为用户要查看以canvas承载的pdf文字,但是查看体验并不是很好,文字很小,也不能放大,那么就需要处理这块问题,找了几个插件,试了vue-photo-preview 这个组件满足条件,不过由于它是使用的img,所以我上边处理给成了img并隐藏对应canvas展示,根据vue-photo-preview 所定的规范来处理,效果还是不错的,不过pdf.js这个组件比较大,我采用了cdn引用了js,以下是剩余部分:

至此,优化差不多了

补充一下,在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);

});

}

});

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页