PDFObject的使用(转)
1.pdfobject.js官网:https://pdfobject.com/
2.在html文件中引入这个文件,以pdfobject.min.js为例
1
|
< script type="text/javascript" src="js/pdfobject.min.js"></ script > |
效果1:在指定位置(当指定位置为全局时)浏览PDF,最终效果类似3.1,不做演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<! DOCTYPE html> < html > < head > < meta charset="UTF-8"> < title >在指定div中浏览PDF</ title > <!--在此引入bootstrap只为初始化样式div样式--> < link rel="stylesheet" href="css/bootstrap.min.css" /> < style > /* 添加样式是为了实现全屏效果 */ html,body{ height: 100%; overflow: hidden; } #example1{ height: 100%; } .pdfobject-container{ /* height: 500px; */ } .pdfobject{ /* border: 1px solid #666; */ } </ style > </ head > < body > < div id="example1"></ div > < script type="text/javascript" src="js/pdfobject.min.js"></ script > < script > // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf PDFObject.embed("pdf/Java.pdf", "#example1"); </ script > </ body > </ html > |
效果2:在指定位置(当指定位置为局部时)浏览PDF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<! DOCTYPE html> < html > < head > < meta charset="UTF-8"> < title >在指定div中浏览PDF</ title > <!--在此引入bootstrap只为初始化样式div样式--> < link rel="stylesheet" href="css/bootstrap.min.css" /> < style > html,body{ height: 100%; overflow: hidden; /* 添加背景颜色是为了方便查看整个body范围 */
} #example1{ /* 设置放置PDF的div的样式 */ height: 50%; width: 50%; } /* PDF容器样式 */ .pdfobject-container{ /* height: 500px; */ } /* PDF样式 */ .pdfobject{ /* border: 1px solid #666; */ } </ style > </ head > < body > < div id="example1"></ div > < script type="text/javascript" src="js/pdfobject.min.js"></ script > < script > // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf PDFObject.embed("pdf/Java.pdf", "#example1"); </ script > </ body > </ html > |
效果3:指定从多少页开始阅读(必须同时指定显示PDF的div)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<! DOCTYPE html> < html > < head > < meta charset="UTF-8"> < title >在指定div中浏览PDF</ title > <!--在此引入bootstrap只为初始化样式div样式--> < link rel="stylesheet" href="css/bootstrap.min.css" /> < style > /* 添加样式是为了实现全屏效果 */ html,body{ height: 100%; overflow: hidden; } #example1{ height: 100%; } .pdfobject-container{ /* height: 500px; */ } .pdfobject{ /* border: 1px solid #666; */ } </ style > </ head > < body > < div id="example1"></ div > < script type="text/javascript" src="js/pdfobject.min.js"></ script > < script > // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf,指定PDF从20页开始阅读 PDFObject.embed("pdf/Java.pdf", "#example1", {page: "20"}); </ script > </ body > </ html > |
原文地址:https://i.cnblogs.com/EditPosts.aspx?opt=1
转自:https://www.cnblogs.com/liyouwu/p/9722590.html
PDFObject的使用(转)的更多相关文章
- PDFobject插件使用,PDF在线查看插件
1.引入插件JS <script type="text/javascript" src="PDFobject.js"></script> ...
- .net使用pdfobject.js加载pdf文件
1.下载pdfobject.js文件 2. <script type="text/javascript" src="<%= Application[" ...
- [转]PDF预览插件PDFObject.js
本文转自:http://pdfobject.com/index.php When possible, use standardized HTML markup and avoid JavaScript ...
- 在线浏览pdf文件,pdfobject的简单使用
该js插件,官网有详细的使用教程(网址:http://www.pdfobject.com/examples/).打开里面的例子后,查看新打开页面,打开并查看该页面的源代码. 需要的材料: 1.PDFo ...
- Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件
在线预览word.excel.ppt利用aspose动态生成html 主要代码 private bool OfficeDocumentToHtml(string sourceDoc, string s ...
- PDF预览之PDFObject.js总结
get from:PDF预览之PDFObject.js总结 PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现 ...
- 基于ASP.NET MVC 利用(Aspose+Pdfobject.js) 实现在线预览Word、Excel、PPT、PDF文件
#region VS2010版本以及以上版本源码下载地址:http://download.csdn.net/download/u012949335/10231812 VS2012版本以及以上版本源码下 ...
- PDFObject.js、jquerymedia.js、pdf.js的对比
由于在做手机项目中需要用到预览pdf文件的需求,一搜还真多,试用后发现兼容性不是很好,大多需要浏览器对pdf阅读的支持: 如果你只是想不依赖浏览器本身对pdf解析的情况下,在手机展示pdf文件,就需要 ...
- pdf 在线预览之 pdfobject插件
支持到ie9 可以不用安装 如果安装 npm i pdfobject 第一步:引入pdfObject包 申明一个变量 const { PDFObject } = require("../. ...
随机推荐
- mven 在个网址
<!-- https://search.maven.org, http://www.mvnrepository.com/ --> <url>http://maven.apach ...
- 简单配置prometheus
一,物理节点安装配置(简单配置,未涉及报警及grafana图形展示) 1,prometheus 官网下载安装 下载安装 # pwd /usr/local/src https://github.com/ ...
- Codeforces Round #302 (Div. 2) D. Destroying Roads 最短路 删边
题目:有n个城镇,m条边权为1的双向边让你破坏最多的道路,使得从s1到t1,从s2到t2的距离分别不超过d1和d2. #include <iostream> #include <cs ...
- (WCF) There is already a listener on IP endpoint 0.0.0.0:9999.
有個nettcpbinding, service host總是不能起來,出現如題錯誤. 查了下,同樣的程序并沒有在進程裏面,但是看起來好像有其他的程序在占用這個Port C:\Program File ...
- DVWA--XSS(DOM)
0X01爱之先了解 DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容.结构以及样式. DOM型XSS其实是一种特殊类型 ...
- [CSP-S模拟测试]:666(模拟)
题目描述 不忘初心. 小$\pi$假期在家无聊,打开了某弹幕直播网站. 突然,有一个精彩的镜头. 小$\pi$看到了满屏的$6$,其中,有$666$.也有$666666$.也有$6666666666. ...
- spring security跳过认证
在启动springboot的时候,给启动注解后添加这个exclude参数后接想要跳过的类就不会加载它了. @SpringBootApplication(exclude = { org.springfr ...
- Python的sys.argv用法
import sys a = sys.argv[:] print("输入的参数为:", a) def train_start(start_time, end_time, selec ...
- maven之pom.xml的配置
pom.xml是配置文件: <dependencies>表示依赖,里面可以有多个<dependency> 比如当前使用了junit的jar包,版本是3,8,1,我们现在更换新的 ...
- java dwg转svg
package com.example.demo.dxf2svg; import com.aspose.cad.InterpolationMode; import com.aspose.cad.Smo ...