PDF预览 vue如何通过路由传参，同时获取传过来的参数

vue 路由跳转，路由传参的几种方式

1.配置好路由

 {
        path: '/Interation/CreditPDF', //路径
        name: 'CreditPDF',
        meta: {
            requireAuth: true
        },
        component: () =>
            import ('@/views/credit/CreditPDF'),//这里是文件所在的位置
    },

2. 路由跳转

2.1. router-link

<router-link :to="{ path: '/Interation/CreditPDF', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>

2.2、$router方式跳转

2.2.1.传参和获取参数（1）

 checkReport(){
       const routeUrl = this.$router.resolve({
        path: "/Interation/CreditPDF",//路径
        query: { 
          orderSn:this.report.order,
          reportSn:this.report.report
        }
      });
      window.open(routeUrl.href, "_blank");
    },

this.$router.push({
            path: '/Interation/CreditPDF',            
            query: {
                name: 'name', 
                dataObj: this.msg
           }
        })

this.$router.push('/Interation/CreditPDF?code=123')

 const orderSn = this.$route.query.orderSn
 const reportSn = this.$route.query.reportSn
 console.log('orderSn,reportSn',orderSn,reportSn);

2.2.2 传参和获取参数（2）

this.$router.push({
            name: '/Interation/CreditPDF',            
            params: {
                name: 'name', 
                dataObj: this.msg
           }
        })

this.$router.params.参数名

pdf预览

1.下载

在官网下载pdfjs http://mozilla.github.io/pdf.js/getting_started/#download

2.放入项目

将解压后的pdf文件夹放在static目录下

将2333.pdf，的路径是/static/2333.pdf
viewer.html的路径是/static/pdf/web/viewer.html

<template>
  <div id="Credit" :style="availHeight">
  </div>
</template>
<script>
export default {
     name: "Credit",
    data() {
      return {
        availHeight:{
          height:'1040px',
          // background:'pink',
        },
      }
    },
    mounted(){
    // this.$route.params
      const orderSn = this.$route.query.orderSn
      const reportSn = this.$route.query.reportSn
      console.log('orderSn,reportSn',orderSn,reportSn);
	this.availHeight.height=window.screen.availHeight
   //  var url = window.location.origin+"/getReport?"+ "order11=${order11}" + "&order22=${order22}"+ "&report=PDF";//测试用的假接口
     var url = window.location.origin+"/static/2333.pdf";
	var pdfUrl = window.location.origin+"/static/pdf/web/viewer.html?file=" + encodeURIComponent(url);
	 $('#Credit').append('<iframe class="prism-player" id="iframe" src='+pdfUrl+' style="height:100%;width:100%" ></iframe>');

    },
// var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
// window.open(window.location.origin + window.location.pathname+'static/pdf/web/viewer.html?file='+url)
}
</script>
<style lang="sass" scoped>
</style>

或者

<template>
  <div id="CreditRisksAnalyzePDF" :style="availHeight">

  </div>
</template>
<script>
export default {
  name: "CreditRisksAnalyzePDF",
  data() {
    return {
      availHeight: {
        height: "1040px",
      },
    };
  },
  mounted() {
    let address = "";
    let devType = process.env.NODE_ENV;
    switch (devType) {
      case "Formal":
        address = "http://11.11.11.111:8081";
        break;
      case "New":
        address = "http://11.11.11.111:8081";
        break;
      default:
        address = "http://11.11.11.111:8081";
    }
    console.log("devType", devType);
    const orderSn = this.$route.query.orderSn;
    const reportSn = this.$route.query.reportSn;
    console.log("orderSn,reportSn", orderSn, reportSn);
    this.availHeight.height = window.screen.availHeight;
    // console.log('this.availHeight.height',this.availHeight.height);
    var url =address +"/data/getReport?" +"orderSn=" +orderSn +"&reportSn=" +reportSn +"&reportStyle=PDF";
    // var url = window.location.origin+"/static/2333.pdf";
    var pdfUrl =window.location.origin +window.location.pathname +"static/pdf/web/viewer.html?file=" +encodeURIComponent(url);
    $("#CreditRisksAnalyzePDF").append('<iframe class="prism-player" id="iframe" src=' +pdfUrl +' style="height:100%;width:100%" ></iframe>'
    );
  },
  // var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
  // window.open(window.location.origin + window.location.pathname+'static/pdf/web/viewer.html?file='+url)
};
</script>
<style lang="sass" scoped>
</style>

出错的话试试这个
注释viewer.js的代码：

//    if (fileOrigin !== viewerOrigin) {
//      throw new Error('file origin does not match viewer\'s');
//    }

仅供学习参考