vue2使用pdfjs-dist实现pdf预览(iframe形式,不修改pdfjs原来的ui和控件,dom层可以用display去掉一部分组件)

前情提要

在一开始要使用pdf预览的时候,第一次选的是vue-pdf,但是vue-pdf支持的功能太少,缺少了项目中需要的一项-复制粘贴功能
之后我一顿搜搜搜,最终貌似只有pdfjs能用
但是网上支持text-layer的貌似都是用的2.09那个版本。

使用textlayer出现的报错:

因为我项目中还有用到vue-pdf的地方,在我npm install pdfjs-dist之后,因为他们的依赖冲突库库报错,最后不得已用了本地的pdfjs

但是因为wiki内容不足,没找到最新版本的textlayer怎么调用,然后加上各种报错最后还是放弃了使用自己调用的pdfjs,选择了最方便的使用浏览器自带的pdfjs(这个问题也多,微信自带浏览器打开不显示)

这两天有空了,又找了找网上的代码,最终在某站上看到一个大佬用的是本地pdfjs,然后没用getDocment的方法,直接用本地的服务访问了pdfjs

vue实现案例

  1. 先去官网下载最新的pdfjs-dist
    https://github.com/mozilla/pdf.js/releases
    我下载的这个版本官网说是可以支持旧版浏览器在这里插入图片描述
  2. 下载之后放到vue项目中的public目录下
    在这里插入图片描述
    在 web/viewer.mjs中 这段代码可以注释调,好像是避免跨域问题

// const fileOrigin = new URL(file, window.location.href).origin;// if (fileOrigin !== viewerOrigin) {//   throw new Error("file origin does not match viewer's");// }
  1. 这时候就可以访问下看看了
    http://localhost:80/js/pdfjs/web/viewer.html (你自己的项目访问地址)
  2. 然后给你项目中的pdf地址前面加上这个本地的地址后用iframe访问就可以了
<iframe:src="pdfurl"frameborder="0"width="100%"height="850px"
></iframe>
this.pdfurl = '/js/pdfjs/web/viewer.html?file=' + data.data.ulr;

在这里插入图片描述

  1. 用dom可以修改iframe中的样式(同源的情况下)
document.getElementsByTagName('iframe')[0].onload = function () {var iframeDocument =this.contentDocument || this.contentWindow.document;var styleElement = iframeDocument.createElement('style');styleElement.textContent = 'body { background-color: blue; }';iframeDocument.head.appendChild(styleElement);};

感谢下https://github.com/Laomai-codefee这个博主,很强

这个是博主用pdfjs实现的项目案例和一些使用方法(react)
https://github.com/Laomai-codefee/pdfjs-annotation-extension/blob/main/README_CN.md

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

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

相关文章

MySQL同步到ES的方案选型

文章目录 1. 同步双写优点缺点实现方式 2. 异步双写优点缺点实现方式 3. 另起应用 SQL 查询写入优点缺点实现方式 4. Binlog 实时同步优点缺点实现方式 5. 应用场景 本文参考: https://www.bilibili.com/video/BV13hvZeaErr/?vd_sourceb7e4d17fd13ffa91c4da6d37c08a6c7c 最近在…

【题解】—— LeetCode一周小结42

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结41 14.鸡蛋掉落 题目链接&#xff1a;887. 鸡蛋掉落 给你 k 枚…

c++迷宫游戏

1、问题描述 程序开始运行时显示一个迷宫地图&#xff0c;迷宫中央有一只老鼠&#xff0c;迷宫的右下方有一个粮仓。游戏的任务是使用键盘上的方向健操纵老鼠在规定的时间内走到粮仓处。 基本要求: 老鼠形象可以辨认,可用键盘操纵老鼠上下左右移动&#xff1b;迷宫的墙足够结…

Springboot指定扫描路径

方式一&#xff1a;通过在启动类的SpringbootApplication中指定包扫描或类扫描 指定需要扫描的包 scanBasePackages{"待扫描包1","待扫描包2", . . . ," "} 指定需要扫描的类 scanBasePackageClasses{类1.class,类2.class,...} 方式二&#xff…

C语言函数实现:深入理解strcpy

文章目录 一、strcpy函数的基本用法二、strcpy函数的实现原理三、strcpy函数的应用场景四、strcpy函数的安全性问题五、结论 C语言函数实现&#xff1a;深入理解strcpy 在C语言编程中&#xff0c;字符串处理是一项基础且重要的任务。 strcpy函数作为C标准库中的一个基本函数&a…

CDC变更数据捕捉技术是什么?和ETL有什么不同?

一、什么是CDC技术? 变更数据捕获&#xff08;Change Data Capture&#xff0c;简称 CDC&#xff09;是一种用于识别和跟踪数据源中发生变化的数据的技术。 工作原理&#xff1a; 1.监测数据源&#xff1a;CDC 工具会持续监测指定的数据源&#xff0c;如数据库表、文件系统…

【C++复习】经典笔试题

文章目录 八大排序快排过程 卡特兰数反转链表链表的回文结构左叶子之和另一棵树的子树归并排序类与对象编程训练杨辉三角字符串乘积二叉树前序遍历成字符串数组的交集二叉树的非递归前序遍历连续子数组的最大乘积 八大排序 插冒归稳定 快排过程 以 [3,4,6,1,2,4,7] 为例&#…

mysql--用户管理

目录 1、创建用户 2、删除用户 3、修改密码 4、数据库权限 5、回收权限 6、查看权限 7、权限列表 1、创建用户 create user 用户名 登录主机 / ip identified by 密码&#xff1b; 2、删除用户 drop user 用户名’登陆主机名‘&#xff1b; 3、修改密码 #用户自己修…

MySQL 聚合函数

1. AVG函数求平均值 以 teacher 表为例&#xff0c;先查所有 teacher 信息&#xff1a; SELECT * FROM teacher;查询结果如下图&#xff1a; 可以使用 AVG() 函数求出全部教师平均年龄&#xff1a; SELECT AVG(age) FROM teacher;执行结果如下图&#xff1a; Tips&#…

Javascript 脚本查找B站限时免费番剧

目录 前言 脚本编写 脚本 前言 B站的一些番剧时不时会“限时免费”&#xff0c;白嫖党最爱&#xff0c;主打一个又占到便宜的快乐。但是在番剧索引里却没有搜索选项可以直接检索“限时免费”的番剧&#xff0c;只能自己一页一页的翻去查看&#xff0c;非常麻烦。 自己找限…

React 前端框架:全面介绍与代码实现

React 是一个由 Facebook 开发的开源 JavaScript 库&#xff0c;用于构建用户界面。作为目前最受欢迎的前端框架之一&#xff0c;React 为开发者提供了一个模块化的方式来构建复杂的用户界面。无论是构建简单的单页应用&#xff0c;还是大型的动态 Web 应用&#xff0c;React 都…

JavaSE——集合16:不可变集合

目录 一、不可变集合基本介绍 二、创建不可变的List集合 三、创建不可变的Set集合 四、创建不可变的Map集合 (一)最多10个键值对 (二) 键值对的数量超过10个 五、总结 一、不可变集合基本介绍 不可变集合&#xff1a;不可以被修改的集合。包括长度、内容等。 应用场景&…

【iOS】使用AFNetworking更方便实现网络请求

目录 前言 如何使用AFNetworing实现网络请求 使用单例 进行网络申请 结语 前言 OC中原生的网络请求流程非常麻烦&#xff0c;通常是以下流程&#xff1a; 创建NSURL对象确定请求地址。使用NSURL创建NSURLRequest对象&#xff0c;可设置请求方法、请求头等。创建NSURLSess…

如何修改MAC地址破解网络无线网络限制-担心别人蹭网,路由器设置MAC地址过滤,限定了能访问无线网络的网卡地址-供大家学习参考

路由器都设置了MAC地址过滤&#xff0c;也就是限定了能访问无线网络的网卡的MAC地址。因为无线路由器不一定由自己控制&#xff0c;所以当更换了笔记本或者更换了无线网卡的时候&#xff0c;也许就上不了网了。我们可以修改网卡的MAC地址实现上网。 下载&#xff1a;https://do…

各种查询sql介绍

1. 关联查询&#xff08;JOIN&#xff09; 关联查询用于从多个表中检索数据。它基于两个或多个表之间的共同字段&#xff08;通常是主键和外键&#xff09;来组合数据。 内连接&#xff08;INNER JOIN&#xff09;&#xff1a; sql SELECT a.name, b.order_date FROM custome…

计算机网络——CDN

空间编码例子&#xff1a;不是发送N个相同颜色值&#xff0c;而是仅发送2个值&#xff0c;颜色和重复个数 时间编码例子&#xff1a;不是发送i1帧的全部编码&#xff0c;而是仅发送帧i差别的地方 视频播放时&#xff0c;先下载manifest file文件——>解析&#xff08;不…

机器学习与神经网络:科技的星辰大海

前提 近日&#xff0c;2024年诺贝尔物理学奖颁发给了机器学习与神经网络领域的研究者&#xff0c;这是历史上首次出现这样的情况。这项奖项原本只授予对自然现象和物质的物理学研究作出重大贡献的科学家&#xff0c;如今却将全球范围内对机器学习和神经网络的研究和开发作为了一…

Python库numpy之五

Python库numpy之五 数据类型数组类型和类型之间的转换数值数据类型字符串和字节的数据类型 数据类型 数组类型和类型之间的转换 NumPy 比 Python 支持更多种类的数值类型。 NumPy 数值类型是 numpy.dtype对象的实例&#xff0c;每个对象都具有独特的特征。可以使用 numpy 顶…

【Kuberntes】k8s权限管理

文章目录 权限管理概述核心概念配置RBAC创建Role和ClusterRole创建RoleBinding和ClusterRoleBinding 默认角色和角色绑定权限的实现注意事项 如何在 Kubernetes 中实现 RBAC 的细粒度权限控制&#xff1f;1. Role和ClusterRole2. RoleBinding和ClusterRoleBinding3. 配置RBAC4.…

gaussdb 基础管理 数据库 表 用户 模式 权限 存储过程

数据库database #创建数据库&#xff0c;指定字符集UTF8&#xff0c;缺省情况下新数据库将通过复制标准系统数据库template0来创建&#xff0c;且仅支持使用template0来创建。 CREATE DATABASE devdb ENCODING UTF8 template template0; CREATE DATABASE testdb; 标识符的命名…