angular js使用pdfjs在线预览/打印/下载pdf

最新推荐文章于 2025-06-28 13:28:09 发布

原创

最新推荐文章于 2025-06-28 13:28:09 发布 · 置顶 · 8.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#pdfjs #angularjs #jquery

本文介绍了如何在AngularJS应用中使用PDF.js进行PDF在线预览、打印和下载。首先，从PDF.js官网获取资源，然后通过修改viewer.html并引入jQuery来解决参数传递问题，特别是针对IE浏览器的缓存问题。通过设置DEFAULT_URL为PDF文件路径，并控制toolbarIsShow参数来决定工具栏是否显示。最后，在需要预览的地方引入viewer.html并设置参数，从而实现预览功能，同时支持在IE浏览器上运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从pdfjs官方网站:http://mozilla.github.io/pdf.js/下载pdfjs-dist，直接引用里面的viewer.html就可在线预览pdf，效果如下图

但是，怎么可能就这么简单拿过来用呢？

pdfjs对angularjs没有支持，所以参数的传递就成了问题，调整viewer.html代码，加入jquery和参数（加入时间戳参数防止在IE浏览器缓存问题）

<script src="../build/jquery-1.11.1.min.js"></script>
<script>

	$(function(){
		
		//返回从问号 (?) 开始的 URL（查询部分）
		var paraString = location.search;
		//多个参数用&分隔，将参数字符串转为数组，使每个参数值存于一个数组元素中
		var paras = paraString.split("*"); 
		//每个数组元素中"="后面的值即参数值 加入时间戳，解决缓存
		DEFAULT_URL = paras[0].substr(paras[0].indexOf("=") + 1)
			+ "&t=" + (new Date()).valueOf();

		if(typeof paras[1] != "undefined") {
			
			toolbarIsShow =