后端返回pdf文件的在线url,前端进行预览。

在这之前我也是看了很多的博客,才发现前端预览pdf文件有很多形式。我的这个项目里面使用的技术是jquery+ajax

通过标签
  • 很多的情况下有通过一个a标签点击去进行查看<进行尝试,得到成功>
  • 通过embed标签,指定type类型。也是可以进行预览的<进行尝试,得到成功>
  • 通过iframe标签,和embed标签很像,object标签也是一样<进行尝试,得到成功>
    以上方法都可以实现预览pdf文件,但是不同的浏览器下出来的效果不用,所以最后我还是选择通过canvas画布来实现
通过canvas
  1. 需要使用到pdf.js
    下载的直接去pdf.js官网下载就可以,附链接http://mozilla.github.io/pdf.js/
    一共需要引入一下两个js文件
    在这里插入图片描述

  2. 页面
    因为后端返回的pdf文件页数是根据用户后台上传的文件大小有关系。所以这里我先给一个div盒子,然后后面会通过js去循环添加每页的canvas标签。
    在这里插入图片描述

  3. js代码

    						// 利用canvse渲染pdf文本内容
    						// data.data.url是后端返回的pdf文件在线地址
    						var loadingTask = pdfjsLib.g
  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值