在这之前我也是看了很多的博客,才发现前端预览pdf文件有很多形式。我的这个项目里面使用的技术是jquery+ajax
通过标签
- 很多的情况下有通过一个a标签点击去进行查看<进行尝试,得到成功>
- 通过
embed
标签,指定type类型。也是可以进行预览的<进行尝试,得到成功> - 通过
iframe
标签,和embed标签很像,object标签也是一样<进行尝试,得到成功>
以上方法都可以实现预览pdf文件,但是不同的浏览器下出来的效果不用,所以最后我还是选择通过canvas画布来实现
通过canvas
-
需要使用到pdf.js
下载的直接去pdf.js官网下载就可以,附链接http://mozilla.github.io/pdf.js/
一共需要引入一下两个js文件
-
页面
因为后端返回的pdf文件页数是根据用户后台上传的文件大小有关系。所以这里我先给一个div盒子,然后后面会通过js去循环添加每页的canvas标签。
-
js代码
// 利用canvse渲染pdf文本内容 // data.data.url是后端返回的pdf文件在线地址 var loadingTask = pdfjsLib.g