位置: IT常识 - 正文

pdf在线预览 pdf.js的使用(pdf在线预览备注)

编辑:rootadmin
pdf在线预览 pdf.js的使用 1.官网:https://mozilla.github.io/pdf.js/2、使用方法

推荐整理分享pdf在线预览 pdf.js的使用(pdf在线预览备注),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:pdf在线预览怎么下载,pdf在线预览组件,pdf在线预览组件,pdf在线预览header头,pdf在线预览组件,pdf在线预览服务,pdf在线预览html5,pdf在线预览插件,内容如对您有帮助,希望把文章链接给更多的朋友!

1) 通过官网,下载pdfJs插件包,放至项目中;

window.open("./js/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );

2)将下载的pdfJS插件包放至服务器中将pdfJS项目跑起来,本案例中将pdfJS文件通过tomcat部署 3)当文件和viewer.html不同路径时(千万注意文件路径,否则无法正常预览)

4)当文件为远程服务器上的文件,我们有文件的路径时,需要将http路径进行转码:

pdf在线预览 pdf.js的使用(pdf在线预览备注)

function methodsOne() { //法一// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );//文件和viewer.html同路径// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径// window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf"); //文件和viewer.html 不同路径,注意路径 let fileUrl = encodeURIComponent('http://10.162.201.40:8005/dev/leck/2022/0215/11_.122qqq_1_092319.pdf') //将路径转码window.open("http://localhost:8888/pdfJS/web/viewer.html?file=" + fileUrl);}

(如预览远程服务器上的文件跨域:

则将vierwe.js中跨域认证注释即可(亲测有效): 将远程文件换成文件流,直接当参数传递:file=文件流数据(未尝试) )

注:以上四种写法的效果如下所示:

// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );//文件和viewer.html同路径// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf");//文件和viewer.html 不同路径,注意路径

5)通过引用插件包中的pdf.js,读出pdf文件中的内容,通过画布在页面中渲染出来, 所有该方法有几个弊端:

只能将pdf一页一页的渲染,需要自己做分页器;翻页效果没有上述直接通过路径预览pdf的方式效果美观;如果要下载打印等操作,需要自己去实现相关功能,但上述直接通过路径预览pdf的方式中有附带这些功能,也可将其隐藏;

实现该预览方式,主要有以下几个步骤:

引入pdf.js获取pdf信息:pdfjsLib.getDocument(’./files/AngularJS权威指南.pdf’) ,该方法放回的是promise,通过loadingTask.promise.then(function(pdf) {}) 可拿到pdf;拿到pdf信息后,对pdf操作,pdf.getPage(pageNum).then(function(page) {}),至此已拿到单独一页的信息,通过canvas将page渲染即可代码如下所示:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#pdfBD {margin-left: 50%;transform: translateX(-50%);}#pdf-pagination {position: fixed;width: 100%;font-size: 14px;top: 100px;left: 10 px;z-index: 100;}span {margin-right: 10px;cursor: pointer;}</style></head><body><canvas id="pdfBD"> </canvas><div id="pdf-pagination"><span id="before" onclick="paginationClick(-1)">上一页</span><span id="current">1</span><span id="next" onclick="paginationClick(1)">下一页</span></div></body><!-- <script src="https://lib.baomitu.com/pdf.js/2.7.570/pdf.js" type="text/javascript" charset="utf-8"></script> --><script src="js/pdfJS/build/pdf.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">let pdfValue = null;let pageContent = {//法二,读取到的pdf信息记录currentPage: 0,//当前页countPage: 0,//总页数 }window.onload = function() {// methodsOne()methodsTwo()}function methodsOne() { //法一// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );//文件和viewer.html同路径// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf"); //文件和viewer.html 不同路径,注意路径 document.getElementById("pdf-pagination").display = 'none'; //隐藏分页器}function methodsTwo() { //法二var loadingTask = pdfjsLib.getDocument('./files/AngularJS权威指南.pdf');loadingTask.promise.then(function(pdf) {console.log(pdf)pdfValue = pdf;pageContent.countPage = pdf.numPages;changePage(pdf, 1)});document.getElementById("pdf-pagination").display = 'block'; //显示分页器}//翻页 type:1 下一页;-1:上一页function paginationClick(type) {if (type == 1) {//下一页pageContent.currentPage == pageContent.countPage ? "" : pageContent.currentPage += 1} else {//上一页pageContent.currentPage == 1 ? "" : pageContent.currentPage -= 1}document.getElementById("current").innerHTML = pageContent.currentPagechangePage(pdfValue, pageContent.currentPage)}//通过页码,渲染当前页currentPage信息:pdf:读取的总的pdf信息,pageNum:需要获取的页数function changePage(pdf, pageNum) {if (pdf == null) return;pdf.getPage(pageNum).then(function(page) {// you can now use *page* herevar scale = 1.5;//放大倍数var viewport = page.getViewport({scale: scale,}); // Support HiDPI-screens.var outputScale = window.devicePixelRatio || 1;var canvas = document.getElementById('pdfBD');var context = canvas.getContext('2d');canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + "px";canvas.style.height = Math.floor(viewport.height) + "px";var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :null;var renderContext = {canvasContext: context,transform: transform,viewport: viewport};page.render(renderContext);});}</script></html>

注: 该方法的预览效果如下(此处页面布局和分页器仅简单实现功能) 【完】

本文链接地址:https://www.jiuchutong.com/zhishi/295295.html 转载请保留说明!

上一篇:Grad-CAM简介(grad_cam)

下一篇:向日葵上的靛蓝彩旗鸟 (© William Krumpelman/Getty Images)(蓝色向日葵)

  • 支付宝账户支付功能关闭怎么解除(支付宝账户支付功能已关闭多久恢复)

    支付宝账户支付功能关闭怎么解除(支付宝账户支付功能已关闭多久恢复)

  • 怪兽充电宝可以异地归还吗(怪兽充电宝可以归还别的机器上吗)

    怪兽充电宝可以异地归还吗(怪兽充电宝可以归还别的机器上吗)

  • 华为nova5有哪几种系列(华为nova5系列有哪些)

    华为nova5有哪几种系列(华为nova5系列有哪些)

  • 信息上有感叹号什么意思(为什么信息会有感叹号)

    信息上有感叹号什么意思(为什么信息会有感叹号)

  • 荣耀play4tpro充电速度(荣耀play4tpro充电器多少w)

    荣耀play4tpro充电速度(荣耀play4tpro充电器多少w)

  • 为什么开机很久才能开机(为什么开机这么久)

    为什么开机很久才能开机(为什么开机这么久)

  • 苹果se内存多大(2020iphone se内存大小)

    苹果se内存多大(2020iphone se内存大小)

  • vivo清除所有数据后果(vivo清除所有数据包括什么)

    vivo清除所有数据后果(vivo清除所有数据包括什么)

  • 会员超前点播是什么意思(会员超前点播看结局就在最新版手机端)

    会员超前点播是什么意思(会员超前点播看结局就在最新版手机端)

  • 抖音视频被限制分享是什么意思(抖音怎样发布视频)

    抖音视频被限制分享是什么意思(抖音怎样发布视频)

  • 电影院用的是什么投影机(电影院用的是什么3D眼镜)

    电影院用的是什么投影机(电影院用的是什么3D眼镜)

  • 电脑虚拟机是什么(电脑虚拟机是干嘛的)

    电脑虚拟机是什么(电脑虚拟机是干嘛的)

  • 华为手机怎么恢复出厂设置(华为手机怎么恢复试卷)

    华为手机怎么恢复出厂设置(华为手机怎么恢复试卷)

  • iphone11pro无线充电功率(iphone11pro无线充电最大功率)

    iphone11pro无线充电功率(iphone11pro无线充电最大功率)

  • 电子电池2032和2025可以通用吗(电子电池2032和2025一样吗?)

    电子电池2032和2025可以通用吗(电子电池2032和2025一样吗?)

  • ios10与ios9谁更流畅(ios10和ios9)

    ios10与ios9谁更流畅(ios10和ios9)

  • 退群后自己信息还在吗(退群后原先发的信息是不是没了)

    退群后自己信息还在吗(退群后原先发的信息是不是没了)

  • 戴尔笔记本怎么设置指纹解锁(戴尔笔记本怎么强制重启)

    戴尔笔记本怎么设置指纹解锁(戴尔笔记本怎么强制重启)

  • 手机qq怎么查看亲密度排行(手机qq怎么查看别人撤回的消息)

    手机qq怎么查看亲密度排行(手机qq怎么查看别人撤回的消息)

  • ps中国红色值(ps中国红的颜色怎么调)

    ps中国红色值(ps中国红的颜色怎么调)

  • 抖音推荐是根据什么(抖音推荐是根据什么推送)

    抖音推荐是根据什么(抖音推荐是根据什么推送)

  • 芒果tv怎么改绑定手机号(芒果tv怎么改绑定手机)

    芒果tv怎么改绑定手机号(芒果tv怎么改绑定手机)

  • Flash动画中如何导入音乐(flash动画如何保存成swf格式)

    Flash动画中如何导入音乐(flash动画如何保存成swf格式)

  • qq临时会话红色感叹号(qq临时会话红色感叹号怎么恢复)

    qq临时会话红色感叹号(qq临时会话红色感叹号怎么恢复)

  • 苹果手机可以设置来电视频吗(苹果手机可以设置通话录音吗)

    苹果手机可以设置来电视频吗(苹果手机可以设置通话录音吗)

  • guid格式怎么装win10(guid格式安装win7)

    guid格式怎么装win10(guid格式安装win7)

  • 港版美版和国行有什么区别(港版美版和国行的苹果手机有什么区别)

    港版美版和国行有什么区别(港版美版和国行的苹果手机有什么区别)

  • 苹果mac怎么禁止某个应用联网?苹果mac禁止某个软件联网教程(苹果mac怎么禁止百度搜索)

    苹果mac怎么禁止某个应用联网?苹果mac禁止某个软件联网教程(苹果mac怎么禁止百度搜索)

  • Windows7系统blender文字模型变碎块吹散的解决方法(blender不支持win7)

    Windows7系统blender文字模型变碎块吹散的解决方法(blender不支持win7)

  • 结转本月销售材料实际成本分录
  • 企业税分几种类型
  • 付给非公司员工提成可以走委托代销商品吗
  • 人工费能不能抵扣进项税
  • 销售自产设备税率
  • 资产减值测试是什么意思
  • 商业企业月末结转成本
  • 集团公司收到的发票
  • 提前预支费用怎么写
  • 摊销费用怎么计提
  • 公司收内部职工停车费如何确认收入?
  • 主营业务税金及附加包括增值税吗
  • 2月的发票入在1月可以吗
  • 顺丰的收派服务费可以抵扣吗
  • 申报文件解密失败怎么办?
  • 蓝字发票是什么票据类型
  • 哪些行为触犯了刑法
  • 如果月初忘记抄税直接开票怎么办
  • 残疾人保障金中的工资总额包括福利费用吗
  • 生产车间广告牌设计图片
  • 为什么有的发票没有发票章
  • 出口货物免抵退税额确认会计分录
  • mac系统小技巧
  • 本期填写的适用3减1政策的本期发生额大于
  • 电子发票上的电子税章如何才能自动生成
  • 研发费用加计扣除
  • php反序列化pop链
  • 暂存款转结余
  • mom.exe是什么
  • windows 10无法开机
  • 鸿蒙系统如何隐藏文件
  • 图书装订的工作容易吗
  • 销售安装费的账务处理
  • 摊销租赁费属于什么费用
  • PHP:curl_multi_close()的用法_cURL函数
  • 意外保险费是什么意思
  • 工程结算需要哪些施工方案
  • php静态函数
  • 房地产开发成本明细
  • 企业的存货按照计划成本核算,期初
  • 民间非营利组织会计制度
  • 土地使用权的使用方式
  • mongodb如何修改数据
  • sql优化常用的15种方法
  • 借款需要缴纳个人所得税吗
  • 抵扣进项税是怎么算的
  • db2导出数据到excel
  • 收付实现制的适用范围
  • 金税四期来了我们前期要准备什么
  • 向银行按揭贷款时,收入流水不够怎么办?
  • 费用报销单如何粘贴票据
  • 餐饮企业老板
  • 公司买东西算什么费用
  • 软件测试取费标准
  • 没有外币账户可以收外币吗
  • 新会计制度下五类是什么
  • sql查询一条数据
  • windows8命令提示符命令大全
  • win8系统没有无线网络连接
  • linux 编译命令
  • win xp 虚拟内存
  • linux如何安装rz和sz
  • rsync 教程
  • 从此学会隐藏悲伤全文
  • 无需u盘安装系统
  • windows8怎么使用
  • 电脑预装软件是什么意思
  • li的简单应用
  • 用户允许控制
  • ssh,scp自动登陆的实现方法
  • linux重启关闭打开达梦数据库
  • Zero Clipboard js+swf实现的复制功能使用方法
  • javascript中数组的方法
  • 详解16型人格
  • 公司代扣税怎么办理
  • 闽政通城乡居民养老保险认证
  • 爱信诺开票系统怎么安装
  • 转让专利权取得的所得属于财产转让所得吗
  • 消费税征税环节
  • 会计专业有必要读博士吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设