使用了几个pdf的显示方法
1. iframe: 在移动端会弹出下载弹框, 所以不推荐使用
2.使用'vue-pdf': 可看https://www.cnblogs.com/tangwei89/p/11526293.html
能正常加载, 但是字体显示不出来, 估计是字体不支持
3.使用pdfjs-dist, 可看//www.greatytc.com/p/b48af7917656
一直加载不出来, 引入不成功
4.使用pdf.js 可看https://www.jb51.net/article/175134.htm
成功显示, 并且加入了放大缩小的功能
(1)下载引入, 放在public(https://github.com/mozilla/pdf.js)
(2)用iframe引入
<div class="wrap">
<iframe :src="pSrc" width="100%" height="90%" ref="pdf" id="xy"></iframe>
<div class="next" style="background-color: #656b79;" @click.stop="back">返回</div>
</div>
(3) 网络请求拿到pdf 的url进行加载(url已处理跨域问题)
// 加载pdf
loadPDF () {
//baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用
// let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
let baseurl = this.pdfSrc;
//ie有缓存加个随机数解决 + '?r=' + new Date()
let pnowSrc = baseurl + '?r=' + new Date();
this.pSrc = '../../pdf/web/viewer.html?file=' + encodeURIComponent(pnowSrc) + '.pdf';
// this.pSrc = '../../pdf/web/viewer.html?file=';
},
(4)访问远程服务器报file origin does not match viewer's报错, 就看viewer.js, 注释里面的代码就可以正常运行了
(5) 加入放大, 缩小按钮, 是用jq的方法获取dom去控制大小
import $ from 'jquery'
data () {
return {
url:'',
pSrc:'',
pdfSrc: '', // pdf文件地址
oId:null,
scale: 100, //放大系数
marginCount: 10, //距离系数
}
},
//放大
scaleD() {
this.scale += 15;
this.marginCount += 25
let per = (this.scale*0.01).toFixed(2)
let mar = this.marginCount+'px'
let sca = 'scale('+per+')'
$('#xy').contents().find('body').find('#viewer .page').css('transform',sca);
$('#xy').contents().find('body').find('#viewer .page').css('marginLeft',mar);
$('#xy').contents().find('body').find('#viewer .page').css('marginTop',mar);
},
//缩小
scaleX() {
if (this.scale == 100) {
$('#xy').contents().find('body').find('#viewer .page').css('margin','1px auto -8px');
return;
}
this.scale += -15;
this.marginCount += -25
let per = (this.scale*0.01).toFixed(2)
let sca = 'scale('+per+')'
let mar = this.marginCount+'px'
$('#xy').contents().find('body').find('#viewer .page').css('transform',sca);
$('#xy').contents().find('body').find('#viewer .page').css('marginLeft',mar);
$('#xy').contents().find('body').find('#viewer .page').css('marginTop',mar);
},
