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);
});
}
});
vue 中展示PDF内容的更多相关文章
- Qt 展示pdf内容(新窗口或嵌入,pdfjs,linux)
前言:初学Qt,在网上查找了诸多资料,有什么poppler.mupdf啊巴拉巴拉的,结果一个比一个费劲,最后还是采用pdfjs较为方便高效,为方便相关问题搜索,写了一下内容. 需求描述:Qt应用中不支 ...
- Vue之展示PDF格式的文档
事实上有很多种在前端展示PDF格式文档的方法,小编也用过好多种,例如有<iframe>.<embed>和<object>这些标签,但是在Vue项目里,这些方法都不能 ...
- Vue中的slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- vue中展示数据
1.v-bind,直接把数据绑定进去了.*100是因为传过来的数据为数字0.3这样子,要转换成百分比 2.整个的数据再data中定义之后,就能在页面直接绑定,v-for,v-if等单独再设置.
- 在html中展示pdf
pc端 插件: https://pdfobject.com/ 使用: <!doctype html> <html lang="en"> <head&g ...
- vue中使用vue-pdf插件显示pdf
最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...
- vue中搜索关键词,使文本标红
UserHead.vue中搜索框: <!-- 搜索 --> <el-col :span="6" :offset="8" class=" ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue轮播,展示pdf
vue轮播,展示pdf 根据左侧图片格式,右侧展示相应的pdf文件与图片.(vue中不支持pdf格式,pdf文件要放在static文件里):代码如下: <template> <!-- ...
随机推荐
- 【11】AngularJS HTML DOM
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 ...
- PM2 & chmod +x
PM2 https://www.npmjs.com/package/pm2 https://github.com/Unitech/pm2 docs https://pm2.io/doc/en/runt ...
- hdu 2602 简单0-1背包模板题
#include<stdio.h> #include<string.h> #define N 1100 int dp[N]; int main() { int n,t,m,a[ ...
- [K/3Cloud]如何解决K3Cloud 2.0审批流提交时报“队列不存在,或您没有足够的权限执行该操……
按照图上的操作即可解决不可提交的问题,但如果应用服务器是部署在域环境下,应该不会出错,这是微软support上说的
- 轰炸III
题目背景 一个大小为N*M的城市遭到了X次轰炸,每次都炸了一个每条边都与边界平行的矩形. 题目描述 在轰炸后,有Y个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几轮. ...
- ScrollView双击图片定点放大
直接先说原理吧--原理:利用了scrollview的回调函数(如下)以及scrollview自己内部的一些缩放规则(其实我也还没弄清楚具体scrollview干了什么事),只是知道了它可以怎么做-_- ...
- 3deye-demo-8-14-26-51
源码
- MySQL: 改变Homebrew安装MySQL/MariaDB的数据库文件目录
1. brew install mariadb 2. mysql_install_db --verbose --user=$USER --basedir=/usr/local/Cellar/maria ...
- Android Studio怎样改动快捷键
在Android Studio中.如果你认为某个快捷键太复杂,要想改动.怎么改动呢,首先要找到这个快捷键,可是Android Studio搜索快捷键有一个bug,就是你不能依据快捷键来搜索相应的功能点 ...
- (寻找第K小的数&&寻找第K小的数的和)
这一篇博客以一些OJ上的题目为载体,讲一下寻找第K小的数的方法 方法一: 先将数据排列好,然后,然后return a[k]或者将前K个数加起来 方法二: 基于高速排序.如,一次高速排序将某一个数放到了 ...