码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-28 17:37:16      阅读:808      评论:0      收藏:0      [点我收藏+]

标签:star   init   function   ssi   expr   ext   span   访问   join   

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‘)));

 




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

标签:star   init   function   ssi   expr   ext   span   访问   join   

原文地址:https://www.cnblogs.com/xfcao/p/9239674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!