首页 > 其他分享 >使用pdf.js展示pdf

使用pdf.js展示pdf

时间:2023-09-20 12:13:29浏览次数:43  
标签:web 展示 viewer js html pdf

一、下载pdf.js文件

https://mozilla.github.io/pdf.js/getting_started/

web里边有一个viewer.html文件 此文件为展示pdf的文件

直接打开此文件不能展示 需要本地启动一个服务 可以使用 http-server -c-1 提示错误的 全局安装一下  npm install http-server -g

现在就可以正常展示了

我的项目是在layui里边使用方法 弹框弹出 也可以使用 a标签 链接到viewer.html

web/viewer.html?file=http://localhost:8088/PDFTest/pdf
 var pdfUrl= 'src/js/pdfjs/web/viewer.html?file='+obj.data.pdf_URL;
 // var pdfUrl= 'src/js/pdfjs/web/viewer.html';
 layer.open({
  type: 2,
  content:pdfUrl,
  area:['859px','540px']
 })

  

 

标签:web,展示,viewer,js,html,pdf
From: https://www.cnblogs.com/hzx-5/p/17716964.html

相关文章

  • JS实现table动态生成过程中,移动行checkbox值丢失问题的解决
     最近在做项目过程中遇到这样一个疑问:(查看实例代码TEST1)DHTML中table对象的moveRow方法实现对table中表格行移动到新位置。例子TEST1中行2包含文本框、复选框、下拉框,当分别键入值后对行2执行上移操作后,我们发现,文本框与下拉框的值不会丢失,但复选框值会丢失。而如果在行2中键......
  • JS应用(很全了)
    如果你找的javascript的东西的话,建议你ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要让你挨着看的话,你就准备看完就去配眼镜!!事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture(); event.srcElement.releaseCaptur......
  • Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象
    世界坐标.getWorldPosition()基础坐标也就是模型的.position属性世界坐标:就是模型资深.position和所有父对象.position累加的坐标用.getWorldPosition()属性需要用三维向量表示摸个坐标后方可读取例如:constgeometry=newTHREE.BoxGeometry(100,100,100);constmaterial......
  • Http Fetch+StreamSaver.js在内存有限的设备下载大文件
    目前前端没有很好的api支持流式的文件的分片下载。如果直接把整个文件保存到Blob对象中再保存,有可能出现很多不可以预期的问题,可能会因为达到浏览器的Blob对象上限而下载失败。也有机会因为客户端内存太低而导致OOM。那如果我们有额外的文件服务器的话,可以选择把文件先导出到文件......
  • nodejs的安装配置
    node.js的介绍Node.js是一个基于ChromeJavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的实时应用。V8引擎执行Javascript的速度非常快,性能非常好。N......
  • js 前端 时间日期 月份 日期不满10 前面加0
    法一://获取当前日期的yyyy-MM-dd格式vardate=newDate();varyear=date.getFullYear();varmonth=date.getMonth()+1<10?"0"+(date.getMonth()+1):date.getMonth()+1;varday=date.getDate()<10?"0"+date.getDate():date.get......
  • 【专题】2022年中国跨境电商行业研究报告PDF合集分享(附原数据表)
    报告链接:http://tecdat.cn/?p=32044近年来,我国的跨境电子商务发展迅速,在过去五年中,其贸易额增长率达到了16.2%,已经成为稳定对外贸易的一支重要力量。阅读原文,获取专题报告合集全文,解锁文末52份跨境电商行业相关报告。一方面,随着跨境电子商务的发展,跨境电子商务的监管政策得到了......
  • 安装nodejs
    http://nodejs.cn/download/在nodejs安装目录下,创建“node_global”和“node_cache”两个文件夹 把【node_global】的路径“E:devToolsodejsode_global”加入到【系统变量】下的【PATH】变量中,方便直接使用命令行运行 再次执行npmconfiggetregistry,检......
  • Node.js ORM Sequelize All In One
    Node.jsORMSequelizeAllInOneSequelizeisaneasy-to-useandpromise-basedNode.jsORMtoolforPostgres,MySQL,MariaDB,SQLite,DB2,MicrosoftSQLServer,andSnowflake.Itfeaturessolidtransactionsupport,relations,eagerandlazyloading,read......
  • 在pycharm中如何对json格式文件数据标准化
    打开pycharm里面的json文件之后,想要将其标准化,就直接使用快捷键:Ctrl+Alt+L即可;效果如图所示:意满离~~......