在网页中显示PDF文件及vue项目中弹出PDF

1、<embed width="800" height="600" src="test_pdf.pdf"> </embed> 
　　

<embed v-show="pdfShow" width="800" height="600" src="../../../public/data/significant.pdf"> </embed>

通过的浏览器：360、Firefox、IE、Chrome

2、<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="600" border="0">

<param name="SRC" value="test_pdf.pdf">

</object>

下面这个完整点：

<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="100%" height="100%" border="0"><!--IE--> 
      <param name="_Version" value="65539"> 
      <param name="_ExtentX" value="20108"> 
      <param name="_ExtentY" value="10866"> 
      <param name="_StockProps" value="0"> 
      <param name="SRC" value="testing_pdf.pdf"> 
<embed src="testing_pdf.pdf" width="100%" height="800" href="testing_pdf.pdf"></embed><!--FF--> 
</object>

通过的浏览器：360、IE

未通过的浏览器：Firefox、Chrome

3、<iframe src="test_pdf.pdf" width="800" height="600"></iframe> 
　　

<iframe src="../../../public/data/significant.pdf" width="800" height="600"></iframe>

通过的浏览器：360、Firefox、IE、Chrome

4、用浏览器直接访问http://127.0.0.1/test_pdf.pdf (其实这个不算是在网页内吧)

通过的浏览器：360、Firefox、IE、Chrome

原网址：https://www.jb51.net/article/117166.htm

https://www.npmjs.com/package/vueshowpdf

Install

npm install vueshowpdf -S

Quick Start

//template

 <vueshowpdf @closepdf="closepdf" v-model="isshowpdf" :pdfurl="pdfurls" @pdferr="pdferr" :maxscale='4' :minscale='0.6' :scale='1.1' ></vueshowpdf>

<span class="compare" @click="sigTab">显著性检验对照表</span>

//javascript

import vueshowpdf from 'vueshowpdf'

Vue.component("vueshowpdf", vueshowpdf);

export default {

    data:{

        return:{

             //pdfurls:'//cdn.mozilla.net/pdfjs/tracemonkey.pdf',

　　　　pdfurls:'http://localhost:3000/data/significant.pdf',

             isshowpdf:false

        }

       

    },

    methods:{

　　

　　sigTab(){

　　　　this.isshowpdf=true

　　},

        closepdf(){

            this.isshowpdf = false

        },

        pdferr(errurl) {

            console.log(errurl);

        }

    },

    components:{

        vueshowpdf

    }

 

 }

## 参数说明

• closepdf 是关闭pdf的时候的出发的函数
• v-model 是否显示pdf
• pdfurl pdf的文件地址
• pdferr 文件地址解析错误时触发的函数 返回错误的pdf地址
• maxscale 最大放大倍数 默认 2
• minscale 最小放大倍数 默认 0.8
• scale 默认放大倍数 默认1.2

server.js

const　　express = require('express');

const　　path = require('path');

app.use(express.static(path.join(__dirname, 'public'

 

相关性分析矩阵

 

<style>

.maxtable{

margin-top: 30px;

}

.per100{

background-color: #FDA49F !important;

}

.per75-100{

background-color: #F1D3AB !important;

}

.per50-75{

background-color: #F1E7AB !important;

}

.per25-50{

background-color: #C6FFFF !important;

}

.per0-25{

background-color:#C7F2AA !important;

}

.per-100{

background-color: #7CFA86 !important;

}

.ivu-table th{

background-color: white;

}

.compare{

color: #FFB806;

cursor: pointer;

}

.credited{

float: right;

margin: 20px 15px 5px 15px;

}

.table{

clear: both;

}

.colbor{

display: inline-block;

width: 30px;

border: 1px solid #C4C8CC;

}

.ivu-col-span-3{

position: absolute;

bottom: 0px;

right: 10px;

}

</style>

<template>

<div style="width:100%">

<ProdDown v-on:choose="getRelatives">

<Icon class="icSearch" type="android-add" size='20' ></Icon>

</ProdDown>

<vueshowpdf @closepdf="closepdf" v-model="isshowpdf" :pdfurl="pdfurls" @pdferr="pdferr" :maxscale='4' :minscale='0.6' :scale='1.1' ></vueshowpdf>

<Row class="maxtable">

<Col span="20">

<div class="credited">

<span>置信度选项</span>

<RadioGroup v-model="credit" >

<Radio label="0.05" ><span>95%</span></Radio>

<Radio label="0.01" ><span>99%</span></Radio>

</RadioGroup>

<span class="compare" @click="sigTab">显著性检验对照表</span>

</div>

<Table class="table" size="small" border :columns="columns" :data="data"></Table>

</Col>

<Col span="3" offset="1">

<ul>

<li class="colorTab">

<span class="colbor per100">　</span><span>100%</span>

</li>

<li class="colorTab">

<span class="colbor per75-100">　</span><span>75-100%</span>

</li>

<li class="colorTab">

<span class="colbor per50-75">　</span><span>50-75%</span>

</li>

<li class="colorTab">

<span class="colbor per25-50">　</span><span>25-50%</span>

</li>

<li class="colorTab">

<span class="colbor per0-25">　</span><span>0-25%</span>

</li>

<li class="colorTab">

<span class="colbor per-100">　</span><span>-100-0%</span>

</li>

</ul>

</Col>

</Row>

</div>

</template>

<script>

import Vue from "vue";

import vueshowpdf from 'vueshowpdf'

// import Echarts from "echarts";

Vue.component("ProdDown", require("../plugs/prodDown.vue").default);

Vue.component("vueshowpdf", vueshowpdf);

export default {

data() {

return {

pdfurls:'http://localhost:3000/data/significant.pdf',

isshowpdf:false,

// pdfShow:false,

pfcodes: [],

legend: [],

cols: [],

credit:'0.01',

val:26,

dataList:[

{"ID":1,ProductA:'BO',ProductB:'C',RelateVal:34,SigniVal:60,CrediVal:90,UpdateTime:'2018-03-29 13:03:00.960'},

{"ID":2,ProductA:'BO',ProductB:'W',RelateVal:74,SigniVal:60,CrediVal:90,UpdateTime:'2018-03-29 13:03:00.960'},

{"ID":4,ProductA:'BO',ProductB:'S',RelateVal:46,SigniVal:60,CrediVal:90,UpdateTime:'2018-03-29 13:03:00.960'},

{"ID":4,ProductA:'C',ProductB:'W',RelateVal:96,SigniVal:60,CrediVal:90,UpdateTime:'2018-03-29 13:03:00.960'},

{"ID":4,ProductA:'C',ProductB:'S',RelateVal:52,SigniVal:60,CrediVal:90,UpdateTime:'2018-03-29 13:03:00.960'},

{"ID":4,ProductA:'W',ProductB:'S',RelateVal:67,SigniVal:60,CrediVal:90,UpdateTime:'2018-03-29 13:03:00.960'},

],

products:[],

columns:[],

data:[],

};

},

methods: {

getRelatives(code,cc,rm) {

console.log(code);

this.legend.push(code);

this.legend=Array.from(new Set(this.legend));

console.log(this.legend.join())

this.$get("/relativity/" + this.legend.join()).then(res => {

console.log(res);

if(res.data.length==0){

console.log(this.$store.state.bd.products)

let oneCode=code.split(',')[code.split(',').length-1]

let cName = this.$store.state.bd.products.filter(p=>p.PF_Code==oneCode.replace(/\'/g,""))[0].Note_Chinese;

this.dataList=[{"ID":0,ProductA:cName,ProductB:cName,RelateVal:1}]

}else{

this.dataList=res.data;

}

this.products=[];

this.columns=[];

this.columns.push({title: ' ',key: 'title', minWidth: 75,})

this.data=[];

this.dataList.forEach((value)=>{

this.products.push(value.ProductA,value.ProductB);

this.products=Array.from(new Set(this.products));

})

console.log(this.products)

for(let val of this.products){

this.columns.push({title:val, key:val,minWidth:75,

renderHeader:(h, params) => {

return h('div', [

h('strong', params.column.title+' '),

h('Icon', {

props: { type: 'close'},

style:{cursor: 'pointer'},

on:{click:()=>{

this.columns.splice(params.index,1);

this.data.splice(params.index-1,1);

let pCode = this.$store.state.bd.products.filter(p=>p.Note_Chinese==params.column.title)[0].PF_Code;

this.legend.splice(this.legend.findIndex(item => item ===`'${pCode}'`), 1)

}}

}),

]);

}});

}

console.log(this.columns)

for(let rowPro of this.products){

let dataDetail={ cellClassName:{}};

for(let value in this.columns){

let colPro=this.columns[value].key;

if(value==='0'){

dataDetail[colPro]=rowPro;

}else{

let val=this.getValue(rowPro,colPro,this.dataList);

dataDetail[colPro]=val;

dataDetail['cellClassName'][colPro]=this.backColor(val);

}

}

console.log(dataDetail)

this.data.push(dataDetail)

}

});

},

backColor(val){

if(val==100) return 'per100';

else if(75<=val&&val<100) return 'per75-100';

else if(50<=val&&val<75) return 'per50-75';

else if(25<=val&&val<50) return 'per25-50';

else if(0<=val&&val<25) return 'per0-25';

else return 'per-100';

},

getValue(rowPro,colPro,dataList) {

for(let data of dataList){

if((data["ProductA"] == rowPro && data["ProductB"]==colPro)||(data["ProductA"] == colPro && data["ProductB"]==rowPro)){

return (data["RelateVal"]*100).toFixed(2);

}

}

return 100.00;

},

sigTab(){

console.log('显著性检验对照表')

this.isshowpdf=true

},

closepdf(){

this.isshowpdf = false

},

pdferr(errurl) {

console.log(errurl);

}

},

mounted() {

// this.getHisVixs();

}

};

</script>