怎么使用pdf.js,html5在浏览器直接打开pdf文档

更新日期: 2017-11-13阅读: 8.6k标签: pdf

pdf.js是什么?

pdf.js是一款开源的pdf文档读取解析插件,据说在html5下诞生的,对于主流的浏览器基本都支持。pdf.js框架的魅力所在无需任何本地支持,浏览器支持HTML5就能支持pdf.js(不过对于低版本的IE,就只能节哀了!)。

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责api解析,一个负责核心解析。官网GitHub地址如下:https://github.com/mozilla/pdf.js。


pdf.js 使用实例 

首先看一个demo:http://mozilla.github.io/pdf.js/web/viewer.html 这个viewer我觉得就是PDF.js的最终UI。

参考代码 

1.引入pdf.js,2.解析读取pdf

function showPdf(){
	PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
	PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
		pdf.getPage(1).then(function getPageHelloWorld(page) {// 获取第一页数据
			var scale = 1.5;
			var viewport = page.getViewport(scale);
			// Prepare canvas using PDF page dimensions
			var canvas = document.getElementById('the-canvas');
			var context = canvas.getContext('2d');
			canvas.height = viewport.height;
			canvas.width = viewport.width;
			// Render PDF page into canvas context
			var renderContext = {
				canvasContext: context,
				  viewport: viewport
				};
			page.render(renderContext);
		});
	});
}

3.设置HTML标签

<a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a
<canvas id="the-canvas"></canvas>

4.通过调用API自己解析,通常,我们直接使用官网的Demo,比如viewer.html,官方已经为我们设置好了预览的皮肤和各种事件,因此,我只需要将官方的库引进去,会进行本地预览即可。


链接: https://www.fly63.com/article/detial/97

js实现html转pdf+html2canvas.js截图不全的问题

最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现。实现的过程是 先用html2canvas.js把html页面转成图片,再用jsPdf.js把图片导出为pdf。

把HTML转成PDF的4个方案及实现

因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容。由于这个任务比用简单的 CSS 规则解决要复杂得多,所以我们先探讨了可能的实现方法。我们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。

使用pdfjs插件在线预览PDF文件

本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法。到PDFJS官网下载pdfjs插件包,注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。在 iframe 标签中使用。

前端通过ajax获取base64转blob下载PDF方法

我们通常下载文件的方式无非后端给一个生成文件链接, 前端通过a标签或者iframe的方式去下载,这种方式的弊端是无法监测到文件是否下载完成,无法给用户友好的提示,以避免用户短时间内重复点击下载.

如何实现高性能的在线 PDF 预览

最近接到产品需求,用户需要在我们的站点上在线查看 PDF 文件,并且查看时,用户可以对 PDF 文件的进行旋转、缩放、跳转到指定页码等操作。这个太简单了,随便找找就一堆轮子。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!