前端 PDF 的使用

预览 PDF

不使用外置 js 类库

iframe

1
2
3
4
5


<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>

embed

1

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

object

1
2
3
4
5


<object data="test.pdf" 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>

使用外置 js 类库

PDFObject

本质也是通过< embed >标签实现PDF预览

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<!DOCTYPE html>
<html>
<head>
    <title>Show PDF</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src='pdfobject.min.js'></script>
    <style type="text/css">
        html,body,#pdf_viewer{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
    if(PDFObject.supportsPDFs){
        // PDF嵌入到网页
        PDFObject.embed("test.pdf", "#pdf_viewer" );
    } else {
        location.href = "/canvas";
    }
</script>
</html>

PDF.js

可以解析 pdf 内所有元素，并在 canvas 上进行绘制。效率相对较低。

1
2
3
4
5


PDFJS.getDocument('test.pdf').then(pdf=>{
    var page = pdf.numPages;
    var startPage = 1;
    renderPageAsync(pdf, page, startPage);
});

处理 PDF

pdf.js/examples at master · mozilla/pdf.js (github.com)