前端预览pdf
- **1.iframe**
- **2.embed**
- **3.object**
- **4.pdfjs**
- 第一种方式:使用viewer.html,以读取文件流方式在线展示pdf文件
- 第二种方式:将PDF文件渲染成Canvas
问题: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应用的根目录为参考点出发进行资源的定位,即根相对路径的使用.