前端预览pdf:PDFJS

最新推荐文章于 2024-06-05 01:32:57 发布

小小鸟008

最新推荐文章于 2024-06-05 01:32:57 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36412715/article/details/108474076

版权

前端专栏收录该内容

35 篇文章 3 订阅

订阅专栏

前端预览pdf

问题：IE浏览器，在没有安装pdf阅读器的时候，embed,iframe,object标签内嵌pdf时，不能显示。
html内嵌pdf的方法：

1.iframe

闭合标签。
指定src为要显示的pdf,此外可以把需要的文本放置在 < iframe > 和 < /iframe>之间，这样就可以应对无法理解 iframe 的浏览器。

<iframe src="/index.pdf" width="100%" height="100%">
 
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
 
</iframe>

2.embed

非闭合标签
但是需要注意的是这个标签不能提供回退方案，与< iframe > < / iframe > 不同，这个标签是自闭合的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。

<embed src="/index.pdf" type="application/pdf" width="100%" height="100%">

3.object

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

如果未显示 object 元素，就会执行之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。和iframe很像，支持回退。

<object data="/index.php" type="application/pdf" width="100%" height="100%">
 
This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
 
</object>

4.pdfjs

针对没有安装pdf阅读器，IE下不能显示的问题，可以使用pdfjs插件。
pdfjs插件还有一个作用就是统一pdf显示的格式，因为各个浏览器显示pdf的格式不一样。

PDF.js: http://mozilla.github.io/pdf.js/

实现pdf预览主要有两种方式：
1、使用pdfjs已经写好的viewer.html页面。需要将pdfjs代码放到服务器上，因为放到本地包有点大。
2、将PDF文件渲染成Canvas。

第一种方式：使用viewer.html,以读取文件流方式在线展示pdf文件

官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download
下载Prebuilt版，我用的是es5的。下载的包里有build和web两个目录。
在这里插入图片描述

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name=referrer content=never>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="renderer" content="webkit">
</head>
<style type="text/css">
	#content{
		width:1000px;
		height:550px;
	}
</style>
<body>
<div id="content"></div>
</body>
<script>
    window.onload=function() {
		var pdf = 'index.pdf';
		var iframe = document.createElement("iframe");
		iframe.setAttribute("src","./web/viewer.html?file=" +encodeURIComponent(pdf));
		//iframe.setAttribute("src","<c:url value='/web/viewer.html' />?file=<c:url value='l505-0009-06-zh-cn.pdf' />
		iframe.setAttribute('width','100%');
		iframe.setAttribute('height','100%');
		document.getElementById("content").appendChild(iframe);		
    }
</script>
</html>

*需要通过http去访问ie,本地不能打开
*pdf文件需要放到web目录下

第二种方式：将PDF文件渲染成Canvas

需要引入pdf.js和pdf.worker.js，且pdf.js里要有PDFJS对象。
因为我用最新的包好像没有导出PDFJS对象。

<!DOCTYPE html>
<html>
    <head>
        <title>Show PDF</title>
        <meta charset="utf-8"/>
        <script type="text/javascript" src='pdf.js'></script>
        <style type="text/css">
            html,body {
                width: 100%;
                margin: 0;
                padding: 0;
                background-color: #444;
            }

            body {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }
			#content{
				width:1000px;
				height:550px;
			}
        </style>
    </head>
    <body>
		<div id="content">
        </div>
	</body>
    <script type="text/javascript">
        
        
	PDFJS.getDocument('./l505-0009-06-zh-cn.pdf').then(pdf=>{
		var numPages = pdf.numPages;
		var start = 1;
		renderPageAsync(pdf, numPages, start);
	});
	
	async function renderPageAsync(pdf, numPages, current){
		for(let i=1; i<=numPages; i++){
			// page
			let page = await pdf.getPage(i);
			
      		let scale = 1.5;
      		let viewport = page.getViewport(scale);
      		// Prepare canvas using PDF page dimensions.
      		let canvas = document.createElement("canvas");
      		let context = canvas.getContext('2d');
      		//document.body.appendChild(canvas);
			//document.getElementById("content").appendChild(canvas);
			document.body.appendChild(canvas);
      		
      		canvas.height = viewport.height;
      		canvas.width = viewport.width;

      		// Render PDF page into canvas context.
      		let renderContext = {
        			canvasContext: context,
        			viewport: viewport
      		};
      		page.render(renderContext);
		}
	}

    
    </script>
</html>

*这种方法用canvas来显示pdf，是把pdf当成一个图片，pdf内容里面的链接就失效了。而且不能把它放到固定大小的div里，否则只能显示div的高度的pdf内容。

方法一符合我的要求。

tip:没有使用<c:url>标签之前必须使用文档相对路径或是绝对路径对目标资源进行定位,如果使用根相对路径就会发生错误,具体详见J2EE中的绝对路径&根相对路径&文档相对路径问题注意,但是在使用<c:url>标签的时候就可以以Web应用的根目录为参考点出发进行资源的定位,即根相对路径的使用.

参考：https://blog.csdn.net/qappleh/article/details/80250492

小小鸟008

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端预览pdf:PDFJS

没有使用<c:url>标签之前必须使用文档相对路径或是绝对路径对目标资源进行定位,如果使用根相对路径就会发生错误,具体详见J2EE中的绝对路径&根相对路径&文档相对路径问题注意,但是在使用<c:url>标签的时候就可以以Web应用的根目录为参考点出发进行资源的定位,即根相对路径的使用....
复制链接

扫一扫