JS在线预览PDF

最新推荐文章于 2024-01-25 10:12:27 发布
最新推荐文章于 2024-01-25 10:12:27 发布
阅读量227 收藏
点赞数
分类专栏： javascript 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sq66666666/article/details/113967804
版权

文中的css和js在这个git里

https://github.com/gjTool/pdfh5.git

<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/pdfh5.css" />
		<link rel="stylesheet" type="text/css" href="css/overall.css"/>
		<!-- <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="js/pdf.js"></script>
		<script src="js/pdf.worker.js"></script>
		<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
		<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="height: 100%;">
		<!-- <div id="bpp" style=""> -->
			<div id="demo" style="height: 100%;width: 100%;"></div>
		<!-- </div> -->
	</body>
</html>
<script type="text/javascript">
	var pdfh5;
	$(function(){
		$.ajax({
			url: "http://**********/api.php/Index/search", //假设这是pdf文件流的请求接口
			type: "post",
			data:{
				id:localStorage.getItem("id")
			},
			success: function (res) {
				console.log(res)
				if(res.status==1){
					yulan(res.data)
				}
			}
		});
	});
	
	function yulan(url) {
		// $("#app").remove()
		$("#demo").show()
		pdfh5 = new Pdfh5('#demo', {
			pdfurl: url,
			lazy:true ,
			loadingBar:false
			// renderType:"svg",
			// textLayer:true,
			// background:{
			// 	image:"url('pdfh5.png')",
			// 	repeat:"no-repeat",
			// 	position:"left top",
			// 	size:"40px 40px"
			// },
			// goto:6,
			// URIenable:true //开启浏览器地址栏file参数获取
		});
		pdfh5.on("zoom", function (scale) {
		    // console.log(scale)
		})
		// new Pdfh5('#demo2', {
		// 	pdfurl: "222.pdf"
		// });
		// new Pdfh5('#demo3', {
		// 	pdfurl: "git.pdf"
		// });
		// setTimeout(() => {
		//     var pdfh5 = new Pdfh5('#demo', {
		//         pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf"
		//     });
		//     setTimeout(() => {
		//         var pdfh5 = new Pdfh5('#demo', {
		//             pdfurl: "1.pdf"
		//         });
		//         setTimeout(() => {
		//             var pdfh5 = new Pdfh5('#demo', {
		//                 pdfurl: "test.pdf"
		//             });
		//             pdfh5.on("complete", function (status, msg, time) {
		//                 console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
		//             })
		//         }, 5000);
		//     }, 5000);
		// }, 5000);
	
		//配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
		// var pdfh5 = new Pdfh5('#demo', {
		//     pdfurl: "./default.pdf",
		//     renderType:"svg"
		// });
	
		// 配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
		// pdfh5 = new Pdfh5('#demo', {
		//     pdfurl: "./test.pdf",
		//     lazy:true 
		// });
	
		//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
		// var pdfh5 = new Pdfh5('#demo', {
		//     URIenable:false,
		//     pdfurl: "./default.pdf"
		// });
	
		//配置项参数 是否显示小部件 顶部绿色加载进度条loadingBar 左上角页码显示pageNum 右下角回到顶部按钮backTop  默认显示
		//		var pdfh5 = new Pdfh5('#demo', {
		// 			 loadingBar: false,
		//           pageNum:false,
		//           backTop:false
		// 		});
	
		//配置项参数data，文件流形式传入  pdfurl和data二选一
		//		var pdfh5 = new Pdfh5('#demo', {
		// 			data: data
		// 		});
	
		//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动  默认允许
		//		var pdfh5 = new Pdfh5('#demo', {
		// 			scrollEnable:false,//是否允许pdf滚动
		// 			pdfurl: url
		// 		});
		//pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动
	
		//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放  默认允许
		//		var pdfh5 = new Pdfh5('#demo', {
		// 			zoomEnable:false,//是否允许pdf手势缩放
		// 			pdfurl: url
		// 		});
		//pdfh5.zoomEnable(true)允许pdf手势缩放，pdfh5.zoomEnable(false)不允许pdf手势缩放
	
		//pdfh5还原、销毁（附带回调函数）：   pdfh5.reset pdfh5.destroy 
		//pdfh5显示、隐藏（附带回调函数）：   pdfh5.show pdfh5.hide 
	
		//pdf准备开始渲染，此时可以拿到pdf总页数
		pdfh5.on("ready", function() {
			// console.log("pdf准备开始渲染，总页数：" + this.totalNum)
		})
		//监听pdf渲染成功
		pdfh5.on("success", function(time) {
			time = time / 1000
			// console.log("pdf渲染完成，总耗时" + time + "秒");
			//滚动到第3页
			// pdfh5.goto(3);
		})
		//监听pdf渲染失败
		// pdfh5.on("error", function (time) {
		//     console.log("渲染失败，总耗时" + time + "毫秒")
		// })
		//监听完成事件，加载失败、渲染成功都会触发
		 pdfh5.on("complete", function (status, msg, time) {
		    // console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum,msg)
		})
		
		//监听渲染中事件
		 pdfh5.on("render", function (currentNum, time, currentPageDom) {
			 // currentPageDom.append("<span class='name-logo'>张三</span>")
			// console.log("当前页码：" + currentNum)
		})
		//on方法,监听事件： 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
		// 缩放zoom   滚动scroll 显示show  隐藏hide 还原reset 销毁destroy  允许缩放zoomEnable 允许滚动scrollEnable
	
		//pdfh5支持在线预览 
		//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
	}
</script>
Knight_SQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jspdf用法
weixin_42333548的博客
07-28 5万+
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置 jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。 官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/ 1、安装：npm install jspdf 2、引入：import jsPDF from "jspdf" 3、使用： let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); 第一..
前端在线预览PDF文件
qw_102030的博客
10-10 5112
如何在vue项目中预览PDF格式的文件 需求：在vue3.x项目中预览pdf文件 提供以下三种方案： 1.Vue-pdf：适用于vue2.x版本，vue3.x需要改一些源码(vue2.x项目极力推荐，vue3.x需要斟酌) 2.Pdf.js：该插件推荐通过其中提供的viewer.html直接展示，优点，使用较简单 3.pdf-dist：pdf.js的npm版本，优点可以通过npm直接下载到项目中。 【读前必看】因为项目是vue3.x版本，因此在这里着重使用第2方案。 第三种方案，个人感觉可以使用到移动端，后
Html转PDF，前端JS实现Html页面导出PDF（html2canvas+jspdf）
qq_45830276的博客
12-10 1万+
当我们在不想改变后端代码的同时想是纯html页面导出PDF，那么（html2canvas+jspdf）就是无疑最好的选择，导出时它不占用我们服务器的资源，而是由用户本地自行执行js文件下载PDF，不占用我们系统的带宽，所以这无非是最好的选择方式
前端实现 PDF 预览的常见方案
forward_xx的博客
09-18 2万+
前端实现 PDF 预览常见的5 种方案 ：iframe 标签、embed 标签、object 标签、PDF.js、PDFObject。
pdf.js实现预览功能
m0_46270721的博客
12-01 1万+
pdf.js实现预览文档 + element-image预览图片
js在线预览wordpdf.rar
01-10
1. PDF在线预览： - **PDF.js**：这是一个由Mozilla开发的开源库，专门用于在浏览器中渲染PDF文档，无需借助Adobe Acrobat或其他插件。它包括`pdf.js`和`pdf.worker.js`两个主要文件。`pdf.js`是核心模块，负责解析...
PDF.js在线预览pdf插件
06-03
1. **在线预览**：PDF.js的主要功能是实现在浏览器中无插件预览PDF文档，用户可以在不离开当前页面的情况下查看PDF内容，提升浏览体验。 2. **高性能渲染**：利用HTML5 Canvas进行文档渲染，支持高分辨率和复杂的...
pdfjs在线预览pdf文档
09-15
下面将详细讨论PDF.js的核心功能、工作原理以及如何使用它来实现在线预览PDF文档。 1. **核心功能**： - **无插件预览**：PDF.js最大的优点就是能够在浏览器中直接预览PDF，无需安装Adobe Reader或其他PDF阅读器。...
pdf.js在线预览pdf
09-18
PDF.js是一款由Mozilla团队开发的开源JavaScript...总结来说，PDF.js是一个强大且灵活的工具，它使得在Web环境中预览PDF文件变得简单而高效。无论你是Web开发者还是普通用户，都可以从中受益，享受更佳的PDF阅读体验。
jquery实现PDF在线预览 jquery实现在线预览PDF文档
01-08
在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...总的来说，jQuery和PDF.js的结合提供了一个强大且灵活的解决方案，使得在Web应用中实现PDF在线预览变得简单易行。
js实现网站预览PDF文件
04-14
js实现网站预览PDF文件
移动端h5打开pdf项目源码，可手势捏合缩放，分段加载（终极版）
08-26
移动端h5打开pdf项目源码。基于pdf.js和jQuery，可手势捏合缩放，分段加载，支持canvas和svg两种渲染pdf模式，不支持本地绝对路径，支持相对路径和网络路径，支持ajax和fetch两者请求方式。在Android和IOS的webview上均可使用。http://www.gjtool.cn
jsPDF使用及注意点记录
pia_ji的博客
07-07 1万+
说明 jsPDF可以将H5转成PDF(其他文件流也可) 实现思路 内容不内容截断问题 1.获取DOM 2.将DOM转换为canvas 3.获取canvas的宽度、高度（稍微大一点，预览） 4.将pdf的宽高设置为canvas的宽高（不适用A4纸大小） 5.将canvas转为图片 6.实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题） 如截断则设置A4纸大小即可 代码 /** target 容器 pdfName 文件名 */ function exp
jsPDF
翼
08-23 6117
jsPDF总结 1 jsPDF的学习 1.1 学习的内容 jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。使用方法很简单，只要引入 jsPDF 库，然后调用内置的方法就可以了。 浏览器兼容性： E 10（未测试）, Firefox 3+（未测试）, Safari 3+（未测试）, Opera（未测试）, Chrome  60.0.3112.101
Vue3中使用pdf.js实现在线预览pdf文件流
最新发布
北京-giser的博客
01-25 1677
Vue3中使用pdf.js实现在线预览pdf文件流。
pdf在线预览解决方案——pdf.js使用
Baron的技术blog
03-10 1673
业务背景 在C端的前端项目中，针对用户会有多种规则需要展示，之前的处理方案是将这些规则写成一个个的静态页面，用户来访问这些页面。但如果这些规则需要变更的话，就需要前端修改对应的规则页面的文案，重新发版。为了避免这种因为规则文案修改而频繁发版的情况，现改用pdf方式来渲染，只需要在后台上传、配置需要展示的pdf规则文件，前端通过动态获取文件url在线预览pdf规则。 实现方式 针对pdf的渲染，为了更好的兼容ie浏览器和m端，采用了PDF.js库。 PDF.js 由 Mozilla 提供支持。目标是创建一个通
浏览器在线查看pdf文件 pdf.js的使用教程
热门推荐
djl的专栏，blog.djl.cx好记
07-31 4万+
谷歌浏览器可以直接在线查看pdf，而IE内核浏览器无法在线查看，默认是下载。 这里用到的是pdf.js，不仅支持IE内核浏览器，而且兼容手机查看pdf 官网地址：http://mozilla.github.io/pdf.js/ 版本：2.0.*   下载之后解压放到本地服务器，打开对应网址查看一下。/web/viewer.html IE也是可以正常显示的 默认的pdf文件设置，搜...
工作笔记三——使用pdf.js实现pdf文件的在线预览
袁杰Jerry
01-06 5089
最近做移动项目（H5）时遇到一个需求，就是在线预览pdf文件。其实本来使用window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进行预览，在安卓上打开是则是下载预览，客户不满意；而且在将该应用嵌入到钉钉微应用时，这个API在安卓设备上根本不起效果。于是在网上找到了这个插件，去官网摘了个例子，并且结合移动端的上下左右滑动滑动翻页做了个例子，完美解决。以下是详细...
js 在线预览pdf 不用插件
09-06
实现在网页中在线预览 PDF 文件而不使用插件的方法有很多种。以下是其中一种常见的解决方案： 1. 首先，将 PDF 文件的内容转换为图像格式。可以使用第三方库，如 `pdf.js` 或者 `pdf2htmlEX`，将 PDF 文件转换为 一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值