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

最新推荐文章于 2024-02-02 15:38:11 发布

dengsha6733

最新推荐文章于 2024-02-02 15:38:11 发布

阅读量1.5k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xfcao/p/9239674.html

版权

1、<embed width="800" height="600" src="test_pdf.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">
      <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>
</object>

通过的浏览器：360、IE

未通过的浏览器：Firefox、Chrome

3、<iframe src="test_pdf.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

<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>

</ProdDown>

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

</RadioGroup>

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

</div>

</Col>

<ul>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</Col>

</Row>

</div>

</template>

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

dengsha6733

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在网页中显示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>通...
复制链接

扫一扫