360浏览器+Adobe Acrobat DC实现在线预览PDF大样校对

news/2024/7/19 15:31:45 标签: pdf, 360浏览器, Adobe DC, JS

甲方:实现方正PDF文字大样校对,校对后在360浏览器中新开一个页面在线预览PDF文字大样校对结果。

我方实现过程:

1.方案选择

  • 方案零:使用浏览器自带的PDF阅览器,经测试360极速模型,谷歌等软件能预览但是标记的PDF内容提示乱码,经测试IE浏览器和Microsoft Edge和360兼容可以;但甲方爸爸说他们习惯使用360,放弃方案该方案;

原因:360极速模型,谷歌使用谷歌内核阅览,IE浏览器和Microsoft Edge和360兼容使用IE内核,它自带adobe,不使用360兼容是因为该模式下网页内容乱码,至于为什么,我猜是当初设计是没考虑。

该过程穿插着联系方正售后,方正售后技术人员说他们还未实现过PDF校对大样的在线预览,可以尝试下载本预览。突然感觉又是乙方了!!!

一起研究了一下,他们实现标记大样批注的时候使用了某某某格式字体,当前浏览器使用谷歌内核不能解析该字体。

  • 方案一:使用PDF.js,能预览但是标记的PDF内容提示乱码,放弃该方案。
  • 方案二:结果wps在线或office在线,成本较高,放弃该方案
  • 方案三:经过调研发现甲方电脑都有安装adobe的PDF阅览工具,因此设计了360浏览器中默认使用adobe的PDF阅览

2.方案三实现过程:

  • 1.安装readerdc_cn_ka_cra_mdr_install.exe

  • 2.下载360浏览器,https://browser.360.cn/se/
    在这里插入图片描述

  • 3.以上安装成功后,找点360浏览器设置-》高级设置-》网页内容高级设置-》插件-》停用单个插件-》确定页面中是否有“Adobe Acrobat”-》同时停用“Chromium PDF Viewer”-》关闭浏览器,再重新打开。
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 4.可以阅览了,测试了好几个系统,可以实现该功能。
    在这里插入图片描述

3.后续问题

  • 1.实施现场发现win7系统该过程操作没问题,但win10系统就遇到 pdf阅览只能显示整个页面高度的1/5,如下图所示。

为什么会出现该问题,我也没想清楚。
在这里插入图片描述

  • 2.处理过程:
    将页面height设置100vh,铺满整个页面说明是没设置默认高度。 排查了一下当初的代码实现:
window.open(pdfUrl); //在新的窗口中打开链接

在这里插入图片描述
改进思路:

  var pdfUrl = "your_pdf_url"; // 替换为您的PDF文件地址

  var newWindow = window.open(); //在新的窗口中打开链接

  newWindow.document.write("<object type='application/pdf' data='" + pdfUrl + "' width='100%' height='800px'></object>"); //在新窗口中插入PDF对象,并将页面高度设置为800像素

  newWindow.onload = function() {
    newWindow.document.getElementsByTagName("object")[0].contentWindow.AdobeDC.ViewSDK.PDFViewer.setViewMode({
      zoom: "FitWidth" //将缩放比例设置为适合宽度
    });
  };

这段代码将在页面中单击该按钮时打开一个新窗口,并在其中加载指定的链接。在新窗口中,我们插入了一个元素,将其类型设置为application/pdf,并将其数据设置为PDF文件的URL地址。然后将其添加到新窗口中,并将页面高度设置为800像素。
最后,我们在新窗口的onload事件中调用AdobeDC.ViewSDK.PDFViewer.setViewMode()方法,将缩放比例设置为适合宽度。这将确保PDF文件在窗口中正确显示,并且不会有任何溢出或截断。

  • 3.结束

http://www.niftyadmin.cn/n/212541.html

相关文章

SpringCloud微服务整合Spring Security OAuth2

这里写目录标题 1、前置知识2、思想2.1、认证2.2、鉴权3、步骤3.1、auth端3.1.1、微服务目录3.1.2、引入必要依赖3.1.3、配置用户鉴权实体类LoginUser3.1.4、创建根据用户名获取封装的用户信息的service:UserDetailServiceImpl3.1.5、如果不想自己设计用户service3.1.6、创建客…

ICLR2021清华团队做的知识蒸馏提升detector的点的工作paper 小陈读论文系列

这个作者栏目就是一个词 清爽 牛逼不需要花里胡哨哈哈 无疑是有点tian了哈哈 不重要 毕竟有机会研读 梦中情笑的paper 还是很感激的 真的 很清爽啊 很多KD的工作确实 在下游任务呢效果不是很好 然后就引出了自己的关于提升知识蒸馏在OD方面的工作 OD 首先就有两个问题 1.前…

react组件渲染两次的问题解决方法

react组件渲染两次 可能会有人问&#xff0c;问什么我的组件明明是就让渲染一次&#xff0c;但是实际上却渲染两次呢&#xff1f;其实我也遇到了这个问题&#xff0c;那么下面我提出一种解决这个问题的一种方法。 如果你使用了react-router低于4.x版本中的hashHistory&#xf…

Flink 优化 (四) --------- 数据倾斜

目录一、判断是否存在数据倾斜二、数据倾斜的解决1. keyBy 后的聚合操作存在数据倾斜2. keyBy 之前发生数据倾斜3. keyBy 后的窗口聚合操作存在数据倾斜一、判断是否存在数据倾斜 相同 Task 的多个 Subtask 中&#xff0c;个别 Subtask 接收到的数据量明显大于其他Subtask 接收…

Machine Learning-Ex4(吴恩达课后习题)Neural Networks Learning

目录 1. Neural Networks 1.1 Visualizing the data 1.2 Model representation 1.3 Feedforward and cost function 1.4 Regularized cost function 2. Backpropagation 2.1 Sigmoid gradient 2.2 Random initialization 2.3 Backpropagation 2.4 Gradient Checking…

移远通信率先通过ISO/SAE 21434汽车网络安全管理体系认证

近日&#xff0c;移远通信车载前装BU获得了由国际独立第三方检测、检验和认证机构TV NORD颁发的ISO/SAE 21434汽车网络安全管理体系认证证书。 ISO/SAE 21434标准认证的通过&#xff0c;表明移远通信车载前装BU的网络安全风险管理满足了产品从概念设计、开发、生产、运营到售后…

Maven的进阶操作

系列文章目录 Maven进阶操作的学习 文章目录系列文章目录前言一、分模块开发与设计二、依赖管理1.依赖传递2.可选依赖3.排除依赖三、继承与聚合1.聚合2.继承四、属性1.属性2.版本管理五、多环境配置与应用1.多环境开发2.跳过测试六、私服1.私服简介2.私服仓库分类3.资源上传与…

云HIS源码 基层卫生健康云HIS源码

云HIS全称为基于云计算的医疗卫生信息系统&#xff08;Cloud-BasedHealthcareInformationSystem&#xff09;&#xff0c;是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按照现代医疗卫生管理要求&#xff0c;在一定区域范围内以数字化形式提供医疗卫生行业数据收集、…