在网页中显示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
Vue.component(“vueshowpdf”, vueshowpdf);
data:
return:
//pdfurls:\’//cdn.mozilla.net/pdfjs/tracemonkey.pdf\’
pdfurls:\’http://localhost:3000/data/significant.pdf\’,
isshowpdf:false
methods:
sigTab(){
this.isshowpdf=true
},
this
}
console
}
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>
版权声明：本文为xfcao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。