首页 > 其他分享 >分享基于PDF.js的pdf阅读器代码

分享基于PDF.js的pdf阅读器代码

时间:2024-03-22 18:33:33浏览次数:13  
标签:web http pdfViewer 代码 js file PDF pdf

一、前言

有时候开发PC端web页面的时候会遇到PDF预览、下载等功能,为了兼容浏览器,需要找一款前端插件进行开发。比较好的PDF插件,就是mozillapdf.js(注意是mozilla,如果你百度遇到需要收费的,那应该是下载错了)。而从mozillaGithub仓库去找想要的代码,如果你不熟悉,想直接使用的话还是有一些麻烦的。

二、pdfViewer

为了能够直接使用,这里分享一下经过简单修改后能直接使用的pdfViewer代码:

pdfViewer代码目录(pdfViewer代码包本文查看附件):
在这里插入图片描述

以Vue工程为例:
①将pdfViewer代码放到pubilc目录下(pdfViewer代码包本文查看附件)
②使用下面的链接进行pdf访问:http://xxx/pdfViewer/web/viewer.html?file=pdfUrl

其中,http://xxx 为项目访问地址。

预览效果:

在这里插入图片描述

注意:
①上述预览使用file:///D:/workspace/study/pdfViewer/web/viewer.html?file=D:\workspace\study\pdfViewer\demo.pdf能直接在浏览器打开,是因为本人浏览器做了跨域允许。一般浏览器是不能使用上述方式直接打开的,需要用http(https)的方式去预览,即:http://xxx/pdfViewer/web/viewer.html?file=pdfUrl
pdfViewer代码只在PC上使用,其页面样式在移动端有兼容问题。移动端有对应的代码包,以后有时间再整理。

标签:web,http,pdfViewer,代码,js,file,PDF,pdf
From: https://blog.csdn.net/q1003675852/article/details/136917966

相关文章

  • http tcp udp json 接收测试
    创建新的Node.js项目:在您的项目文件夹中打开命令行或终端,并运行以下命令来初始化一个新的Node.js项目:npminit-y安装依赖库:执行以下命令来安装 dgram 模块,它是Node.js提供的用于处理UDP数据的模块:npminstalldgram启动UDP服务器:在命令行或终端中,进入项目文......
  • 【教程】深入探究 JS代码混淆与加密技术
     ......
  • 2020-3-1-jsonp原理
    原理ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,将数据作为参数,在src中进行了调用,这样实现了跨域。实现代码1服务端//nodejsvarhttp=require......
  • 2020-2-20-nodejs基础知识
    vs插件安装、快速运行、url模块使用、自动重启工具supervisor、自定义模块、下载第三方包、fs模块、Async、Await的使用、文件里、简易静态服务器、事件驱动EventEmitter、模拟登陆简单版、模拟express封装、操作mongodb数据库VScode插件安装需要安装NodeSnippets插件才会有提......
  • 2020-1-9-js新特性第二部分
    实现map函数、嵌套函数和闭包、arguments对象、函数参数、关系操作符、遍历数组foreach方法、map对象与object对象的区别、promise对象、生成器实现Map函数传入处理函数和数组,返回值为将数组内的数按照函数规则处理后新生成的数组window.onload=function(){functio......
  • 2020-1-6-js新特性第一部分
    var、let、const的区别,对象被定义为常量不受保护,自执行函数注意事项,箭头函数特点,对象扩展运算和对象解构运算,label语句,for...in...和for...of...的区别var、let、const的区别varletconst作用域函数花括号内全局是否可重复声明可以不可以不可以声明后是......
  • 宠物医院管理系统(JSP+java+springmvc+mysql+MyBatis)
    本项目包含程序+源码+数据库+LW+调试部署环境,文末可获取一份本项目的java源码和数据库参考。项目文件图项目介绍随着宠物行业的快速发展和宠物数量的不断增加,宠物医疗服务的需求日益旺盛。宠物医院管理系统作为一种专业的信息化工具,对于提升宠物医院的工作效率、优化顾客服......
  • 房屋中介房源管理系统的设计与实现(JSP+java+springmvc+mysql+MyBatis)
    本项目包含程序+源码+数据库+LW+调试部署环境,文末可获取一份本项目的java源码和数据库参考。项目文件图项目介绍随着房地产市场的蓬勃发展,房屋中介机构在房源管理和客户服务方面面临着日益增长的挑战。一个高效、可靠的房屋中介房源管理系统对于提升中介机构的工作效率、优......
  • 前端使用StreamSaver.js流式下载大文件
    最近有个需求,要求批量下载腾讯云cos文件,并打包压缩。1.方案一起初用的方案,文件数据一直是以blob方式传递的,小文件可以成功下载,但是遇到大文件(比如几个G)一直等待且不加遮罩层loading的情况下体验效果很差。import{saveAs}from'file-saver';importJSZipfrom'jszip';......
  • Nodejs常用命令及解释
    node-启动Node.js程序解释:使用该命令可以直接运行一个Node.js程序,从而执行其中的JavaScript代码。npm-Node.js包管理器命令解释:npm是Node.js的包管理器,可以用来安装、卸载和管理Node.js包。常用的命令有:npminit-初始化一个新的Node.js项目npminsta......