vue pdf.js 使用

1. 官网下载稳定版本 放进项目的静态资源文件static

   
   
   image.png

2. iframe 引入文件

image.png

3.路径拼接

loadPDF () {
// baseurl  项目路径前缀  api 后台返回文件的接口路径
// ie有缓存加个随机数解决  + '?r=' + new Date()
  this.loading = false;
  console.info(process.env.NODE_ENV);
  let baseurl = '';
  if (process.env.NODE_ENV === 'production') {
    baseurl = 'production基础路径';
    let pdfUrl = baseurl + api + this.id + '?r=' + new Date();
    this.pdfUrl = 'pb_static/web/viewer.html?file=' + encodeURIComponent(pdfUrl) + '.pdf';
  } else if (process.env.NODE_ENV === 'test') {
    baseurl = 'test基础路径';
    let pdfUrl = baseurl + api + this.id + '?r=' + new Date();
    this.pdfUrl = 'pb_static/web/viewer.html?file=' + encodeURIComponent(pdfUrl) + '.pdf';
  } else {
    baseurl = 'dev基础路径';
    let pdfUrl = baseurl + api + this.id + '?r=' + new Date();
    this.pdfUrl = '../../../../static/web/viewer.html?file=' + encodeURIComponent(pdfUrl) + '.pdf';
  }
  console.log('url', this.pdfUrl);
},

坑：本项目中引入了高版本的在ie和火狐不显示pdf文件，后网上找了个低版本的解决问题。