如何实现预览pdf功能

想要在前端实现预览pdf功能，我们需要借助pdf.js。

下载

直接在官网下载pdf.js就可以，下好的包放到自己需要的目录下，正常引用即可。

使用

以下是用最简单的办法先实现预览功能，能在页面上看到成果的。

<div class="content">
       <iframe src="" id="pdfPage" frameborder="0" style="width: 100%;height: 100%;"></iframe>
</div>

// 引用pdf.js;
<script src="js/PDF/build/pdf.js"></script> 
 
<script>
    // 此处是引用下载好的pdf模板，正常应该下载后，放你自己的pdf文件;
    var url = 'compressed.tracemonkey-pldi-09.pdf'; 
    var src = `http://xxxx/xxxx/js/PDF/web/viewer.html?file=${url}`；
    document.getElementById('pdfPage').src = src；
</script>

在这个示例中，先引用pdf.js库，使用iframe页面用来显示pdf。

此外，pdf.js还支持旋转，缩放等默认功能。

核心思想就是，用pdf.js这个插件，通过一个iframe页面，把pdf渲染到这个iframe页面里显示。

如果后端返回的pdf是个地址，则需要多一步下载，然后再进行渲染。