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

一、前言

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

二、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上使用,其页面样式在移动端有兼容问题。移动端有对应的代码包,以后有时间再整理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/763439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python矢量算法-三角形变化寻找对应点

1.算法需求描述 现有随机生成的两个三角形A与B,在三角形A中存在Pa,使用算法计算出三角形B中对应的点Pb 2.python代码 import numpy as np # 计算三角形A的面积 def area_triangle(vertices): return 0.5 * np.abs(np.dot(vertices[0] - vertices[…

品时尚精酿啤酒,探秘时尚背后的故事

在琳琅满目的啤酒市场中,Fendi Club啤酒以其时尚的风格和品质,成为了引人注目的焦点。这款啤酒不仅是一种味觉的享受,更是一种时尚与品味的象征。接下来,让我们一起探索Fendi Club啤酒背后的故事。 一、Fendi Club啤酒的特色 Fen…

师徒互电,眼冒金星,采集系统变电刺激系统!

原文来自微信公众号:工程师看海,很高兴分享我的原创文章,喜欢和支持我的工程师,一定记得给我点赞、收藏、分享哟。 加微信[chunhou0820]与作者进群沟通交流 电的我眼冒金星,以为自己被三体召唤,整个世界为我…

什么是浏览器指纹识别?Maskfog指纹浏览器有用吗?

浏览器指纹识别是好是坏?这现在确实是一个有争议的话题。83%的消费者经常或偶尔会根据浏览历史记录看到广告。其实这就是利用了浏览器指纹技术。 如果您想了解浏览器指纹识别是什么,那就看下去! 一、什么是浏览器指纹识别 浏览器指纹是指无…

鸿蒙一次开发,多端部署(四)工程管理

DevEco Studio的基本使用,请参考DevEco Studio使用指南。本章主要介绍如何使用DevEco Studio进行多设备应用开发。 说明: 本章的内容基于DevEco Studio 3.1.1 Release版本进行介绍,如您使用DevEco Studio其它版本,可能存在文档与产…

《妈妈是什么》笔记(一)孩子都有被关注的需求

简介 作者渡渡鸟, 其本名韩谨,微博原创育儿理念、故事、分享妈妈经。毕业于中国社科院哲学系,有过八年记者生涯。育有一儿两女,在中美两国生活,熟悉跨文化养育,有坚定的根文化意识。 渡渡鸟妈妈能够基于孩…

docker基础超详细教程,一篇文章帮助你从零开始学习docker,从入门到实战

docker 概述 docker 官网:http://www.docker.com 官网文档: https://docs.docker.com/get-docker/ Docker Hub官网:https://hub.docker.com (仓库) 什么是 docker docker 是一个开源的容器化平台,可以…

Python螺旋折线蓝桥杯(来源lanqiao.cn 题目176) 时间超限

题目描述 如图所示的螺旋折线经过平面上所有整点恰好一次。 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度。 例如dis(0, 1)3, dis(-2, -1)9 给出整点坐标(X, Y),你能计算出dis(X, Y)吗? 输入格式 …

js【详解】typeof 运算符

typeof()表示“获取变量的数据类型”,返回的是小写,语法为:(两种写法都可以) // 写法1 typeof 变量;// 写法2 typeof(变量); typeof 这个运算符的返回结果就是变量的类型。 返回结果: typeof 的代码写法…

Swift 中的 Sequence 是什么 ?

在 Swift 中,Sequence 是一个协议,它表示一个可以遍历其元素的集合类型。任何遵循 Sequence 协议的类型都必须提供一个迭代器,用于按顺序访问其元素。迭代器是通过 makeIterator() 方法获取的,该方法返回一个遵循 IteratorProtoco…

【数组、字符串】算法例题

每个题的【方法1】是自己的思路,【其他方法】是力扣上更优的解题思路 目录 一、数组、字符串 1. 合并两个有序数组 ① 2. 移除元素 ① 3. 删除有序数组中的重复项 ① 4. 删除有序数组中的重复项 II ② 5. 多数元素 ① 6. 轮转数组 ② 7. 买卖股票的最佳时机…

基于单片机的指纹打卡机设计

摘要 在科学技术飞速发展的今天,社会对身份识别的要求越来越高,尤其是在企业管理的人员签到、工作考勤等活动中对身份识别的高效性和可靠性的需求更为迫切。而传统的个人身份识别手段,如钥匙、密码、IC卡等,由于具有可盗用、可伪…

C语言:volatile关键字讲解

读音:vaoletail C语言中的volatile关键字是一个重要的类型修饰符,它用于声明一个变量具有“易变性”,即可能在编译器无法察觉的情况下被改变其值。Volatile意思是“易变的”,应该解释为“直接存取原始内存地址”比较合适。 “易变…

好看的表情壁纸

不定时更新表情壁纸,后期支持头像,wx背景等,个人开发,觉得不错,可前往小程序或者公众号查看

定制红酒:品质保障,从源头做起

云仓酒庄的洒派定制红酒,以其卓着的品质和与众不同的口感,赢得了众多消费者的喜爱。而这种品质的保障,正是从源头上开始的。 在葡萄种植方面,种植者对土壤、气候等自然条件进行严格的筛选和评估,确保葡萄能够在理想的环…

Python的错误和异常,异常的处理

我们平时经常会碰到一些报错信息,特别是对于入门的敲代码选手来说,碰到报错嘎嘎头大,但我们要知道它们是程序执行过程中的常态而非例外。本篇文章,就让我们一起来了解一下错误和异常,在平时编程过程中正确理解和有效处…

android adb 实时画面 和操作

1. 下载 scrcpy 建议 windows10 用户 点击链接下载 不然可能会提示缺少部分 dll https://github.com/Genymobile/scrcpy/releases/download/v2.3.1/scrcpy-win32-v2.3.1.ziphttps://github.com/Genymobile/scrcpy/releases/download/v2.3.1/scrcpy-win32-v2.3.1.zip windo…

Android App开发的自动化测试框架UI Automator使用教程

UI Automator为Android程序的UI开发提供了测试环境,这里我们就来看一下Android App开发的自动化测试框架UI Automator使用教程,需要的朋友可以参考下 Android的自动化测试有很多框架,其中ui automator是google官方提供的黑盒UI相关的自动化测试工具,&am…

【进程和线程】操作系统中的并发执行机制

目录 一、什么是进程(Process)? 进程的管理 进程调度(重点) 二、什么是线程(Thread)? 三、进程和线程的区别与联系 进程(Process) 线程(Thread) 总结比较 一、什么是进程(Process)? 进程和线程是操作系统中一个非常核心的话题&#…

【LeetCode】回溯

labuladong回溯 回溯算法秒杀所有排列-组合-子集问题 回溯 一个回溯问题,实际上就是遍历一棵决策树的过程,树的每个叶子节点存放着一个合法答案。你把整棵树遍历一遍,把叶子节点上的答案都收集起来,就能得到所有的合法答案。 站…