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>

在网页中显示PDF文件及vue项目中弹出PDF的更多相关文章

  1. 如何在浏览器网页中显示word文件内容

    如何在浏览器网页中显示word文件内容 把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileS ...

  2. 网页中显示pdf的方法

    非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunki ...

  3. 网页中显示pdf

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

  4. 非常好的在网页中显示pdf的方法

    今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...

  5. 网页中显示xml,直接显示xml格式的文件

    第一种方法 使用<pre></pre>包围代码(在浏览器中测试不行啊,但是在富编辑器中又可以,怪):使用<xmp></xmp>包围代码(官方不推荐,但是 ...

  6. 在网页中显示CHM (c# csharp .net asp.net winform)

    CHM即“已编译的帮助文件”,主要由.hhc(目录文件)..hhk(索引文件)以及相应的帮助主题文件(.html,.htm)这些内容编译而成. 方法对比 在网页中显示CHM内容,大致有以下几种办法: ...

  7. Emoji表情在网页中显示

    最近遇到一个项目,客户手机上发送的表情要在电脑网页中显示,没有找到简便方法,于是有了以下方案. 由于Emoji表情传到后台是“口”,怎么找出接收数据中的表情是关键,各种搜索后,我用下面的正则表达式匹配 ...

  8. Flash设置全屏后,放到网页中显示不正常

    stage.displayState = StageDisplayState.FULL_SCREEN;//全屏,注意当设置全屏后,放到网页中显示不正常

  9. 在线打开,浏览PDF文件的各种方式及各种pdf插件------(MS OneDrive/google drive & google doc/ github ?raw=true)

    在线打开,浏览PDF文件的各种方式: 1 Google drive&doc   (国内不好使,you know GFW=Great Firewall) 1. google drive: 直接分 ...

随机推荐

  1. Android学习(十) SQLite 基于SQLiteOpenHelper的操作方式

    main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  2. Linux经常使用命令(八) - touch

    linux的touch命令不经常使用, 一般用来改动文件时间戳, 或者新建一个不存在的文件. 1. 命令格式: touch [选项]  文件 2. 命令參数: -a    仅仅更改存取时间. -c   ...

  3. C. Glass Carving (CF Round #296 (Div. 2) STL--set的运用 &amp;&amp; 并查集方法)

    C. Glass Carving time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. spring 源码下载

    github spring 源码 导入Spring源码方法 java世界中的三大构建工具:ant,maven,gradle gradle 简介

  5. zabbix监控第二块网卡是否连通

    配置zabbix客户端配置文件 vim /etc/zabbix/zabbix_agentd.conf 添加  Include=/etc/zabbix/zabbix_agentd.d/ 添加脚本检测网卡 ...

  6. Linux如何查看进程、杀死进程、查看端口等常用命令

    查看进程号 1.ps 命令用于查看当前正在运行的进程.grep 是搜索 例如: ps -ef | grep java表示查看所有进程里 CMD 是 java 的进程信息2.ps -aux | grep ...

  7. 防火墙firewall的设置和查看

    systemctl start firewalld.service # 开启防火墙firewallsystemctl stop firewalld.service # 停止防火墙firewall sy ...

  8. LVM卷组命令

    一般维护命令  #vgscan //检測系统中全部磁盘  #vgck [卷组名] //用于检查卷组中卷组描写叙述区域信息的一致性.  #vgdisplay [卷组名] //显示卷组的属性信息  #vg ...

  9. 在SDL中显示GBK点阵汉字

    大家注意到没有,RA2的中文版本使用的是GBK点阵字库,这样做有一个好处:不管玩家是用的简体还是繁体都能识别显示的文字. GBK的意思大概是“国家标准汉字扩展字符集”吧,记不清了.但它的确是个好东东, ...

  10. Shell计算器

    #!/bin/bash # filename : jisuan.sh # description : add, subtract, multiply, and divide print_usage() ...