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

Posted xfcao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在网页中显示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
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的主要内容，如果未能解决你的问题，请参考以下文章

用VS2010做个ASP网页，但是运行时（即按ctrl+F5），从IE浏览器中弹出，但是页面一直在连接，没发显示出来

完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题

完美解决vue项目中弹出框滑动时，内部页面也跟着滑动问题

怎么将java web项目出错中弹出的来自网页信息框关掉!

网页显示PDF文件，拒绝访问

vue-pdf 预览乱码问题