博客

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

  • Post author:
  • Post category:vue


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″>&#x3000;</span><span>100%</span>
</li>
<li class=”colorTab”>
<span class=”colbor per75-100″>&#x3000;</span><span>75-100%</span>
</li>
<li class=”colorTab”>
<span class=”colbor per50-75″>&#x3000;</span><span>50-75%</span>
</li>
<li class=”colorTab”>
<span class=”colbor per25-50″>&#x3000;</span><span>25-50%</span>
</li>
<li class=”colorTab”>
<span class=”colbor per0-25″>&#x3000;</span><span>0-25%</span>
</li>
<li class=”colorTab”>
<span class=”colbor per-100″>&#x3000;</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>

转载于:https://www.cnblogs.com/xfcao/p/9239674.html