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

发布时间：2023-09-06 02:01责任编辑：郭大石关键词：暂无标签

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

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

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

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

Install

Quick Start

知识推荐