pdf.js最简单使用

H5预览PDF,集成在Android、IOS里,出于兼容性考虑,使用pdf.js。
网上很多教程,但是pdf.js的版本更新的很快,从github上下载最新版本,基本上都不适用,此处给出一个比较旧的版本1.9.426的使用方法,胜在简单

pdfjs-1.9.426下载地址

https://pan.baidu.com/s/1wW6P-fdHpiEHD_zME0pIXQ
qtom

前端

主要文件 pdfjs-1.9.426-dist/web/viewer.html

将解压的内容放到服务器中(如tomcat的项目的资源文件夹中),使用url地址打开viewer.html,结果如下:(该pdf是web目录下的compressed.tracemonkey-pldi-09.pdf–控件自带)
在这里插入图片描述

打开其他的PDF:(在url中添加file参数即可,且可实现跨域访问)
在这里插入图片描述

后台

演示使用数据流的方式加载给前端返回pdf。pdf的来源为域外,此处后台做了一个代理的作用


public String pdf(HttpServletRequest request, HttpServletResponse response) throws IOException{
		
		String url = "http://www.baidu.com";
		
		InputStream is = null;
		OutputStream outputStream = null;
		try {
			is = new URL(url).openStream();
			outputStream = response.getOutputStream();
			response.setContentType("application/pdf");
			int len=-1;
		    byte[] b=new byte[1024];
		    while((len=is.read(b))!=-1){
		    	outputStream.write(b,0,len);
		    }
		} catch (MalformedURLException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} finally{
			if(is!=null){
				is.close();
			}
			if(outputStream!=null){
				outputStream.flush();
				outputStream.close();
			}
		}
		return null;
	}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
PDF.js是一个用于在Web浏览器中显示PDF文件的JavaScript库。它是由Mozilla开发的开源项目,可以在任何现代浏览器中使用。 要使用PDF.js,首先需要将其引入到你的HTML文件中。你可以通过以下方式引入: ```html <script src="path/to/pdf.js"></script> ``` 接下来,你需要在HTML中创建一个用于显示PDF的容器元素,例如一个`<div>`元素: ```html <div id="pdfContainer"></div> ``` 然后,你可以使用JavaScript代码来加载和显示PDF文件。以下是一个简单的示例: ```javascript // 获取PDF容器元素 var container = document.getElementById('pdfContainer'); // 使用PDF.js加载PDF文件 PDFJS.getDocument('path/to/pdfFile.pdf').then(function(pdf) { // 获取第一页 pdf.getPage(1).then(function(page) { // 创建一个canvas元素用于显示PDF页面 var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // 设置canvas的尺寸与PDF页面尺寸相同 var viewport = page.getViewport(1); canvas.width = viewport.width; canvas.height = viewport.height; // 将PDF页面渲染到canvas上 page.render({ canvasContext: context, viewport: viewport }); // 将canvas添加到容器元素中 container.appendChild(canvas); }); }); ``` 在上面的示例中,我们首先获取了PDF容器元素,然后使用`PDFJS.getDocument()`方法加载PDF文件。一旦加载完成,我们可以使用`pdf.getPage()`方法获取PDF的第一页。然后,我们创建一个canvas元素,并将PDF页面渲染到canvas上。最后,将canvas添加到容器元素中,这样就可以在浏览器中显示PDF文件了。 请注意,上面的示例只是一个简单的演示,你可以根据自己的需求进行更复杂的操作,例如加载多个页面、添加缩放功能等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值