vue-cli3+pdf.js

使用了几个pdf的显示方法

1. iframe: 在移动端会弹出下载弹框, 所以不推荐使用

2.使用'vue-pdf': 可看https://www.cnblogs.com/tangwei89/p/11526293.html

能正常加载, 但是字体显示不出来, 估计是字体不支持

3.使用pdfjs-dist, 可看https://www.jianshu.com/p/b48af7917656

一直加载不出来, 引入不成功

4.使用pdf.js  可看https://www.jb51.net/article/175134.htm

成功显示, 并且加入了放大缩小的功能

(1)下载引入, 放在public(https://github.com/mozilla/pdf.js)

(2)用iframe引入

 

  

  返回

 

(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);

      },